Как проверить форму в слоте из родительского компонента в vue? - PullRequest
Новая
       7

Как проверить форму в слоте из родительского компонента в vue?

0 голосов
/ 13 мая 2018

InfoItemComponent 

<form action="" @submit.prevent="formSubmit">
  <div class="account-container_right__infoInput">
    <!-- <input type="text"> -->
    <slot></slot>
  </div>
  <div class="account-container_right__infoButtons">
    <button type="submit" class="btn btn--primary">save</button>
    <button class="btn btn--default" @click.prevent="cancelEdit">cancel</button>
  </div>
</form>

как я использую InfoItemComponent 

<info-item @formSubmit="formSubmit">
  <input type="text" v-validate="'required'" >
</info-item>

Что я хочу сделать, так это когда я нажимаю кнопку отправки в infoitemcomponent, я хочу проверить элемент ввода с помощью vee-validate. Как я могу сделать, чтобы решить эту проблему

1 Ответ

0 голосов
/ 13 мая 2018

Вы должны генерировать событие в родительском компоненте, когда отправленная форма и в родительском компоненте проверяют входные данные.

InfoItemComponent: 

<template>
  <form action="" @submit.prevent="formSubmit">
    <div class="account-container_right__infoInput">
      <!-- <input type="text"> -->
      <slot></slot>
    </div>
    <div class="account-container_right__infoButtons">
      <button type="submit" class="btn btn--primary">save</button>
      <button class="btn btn--default" @click.prevent="cancelEdit">cancel</button>
    </div>
  </form>
</template>
<script>
    export default {
    //other code..
    methods: {
      formSubmit() {
        this.$emit('formSubmited')
      }
    }
    //other code..
  }
</script>

как использовать InfoItemComponent 

<info-item @formSubmited="formSubmit">
  <input type="text" v-validate="'required'" >
</info-item>

<script>
 export default {
    //other code
  methods: {
    formSubmit() {
      //here validate your fields
    }
  }
   //other code
 }
</script>
...