Vue.js - vee-validateを使用してv-forを使用してカスタム単一ファイルコンポーネントを正しく検証できない

Question

私はvueアプリケーションを構築していますが、現在は "Person"オブジェクトを持つコンポーネントを構築しています。名前、住所、電子メールなど、その人に関する情報を追加するための入力フィールドがいくつかあります。これらのフィールドの1つは携帯電話番号ですが、人は複数の番号を持つことができるので、入力を繰り返すカスタムコンポーネントを作成しましたフィールドを意志で。これはおおよその外観です。これらの入力はすべてvee validateを使用して検証されています。これは次のようになりますされ、ほぼどのようなものです：

 <!--createPerson.vue --> 
    <div class="form-group"> 
     <input v-model="person.firstName" v-validate="'required'" data-vv-delay="500" name="first-name" type="text" placeholder="First name"> 
     <span v-show="errors.has('first-name')" class="input__error">{{ errors.first('first-name') }}</span> 
    </div> 

    <div class="form-group"> 
     <input v-model="person.lastName" v-validate="'required'" data-vv-delay="500" name="last-name" type="text" placeholder="Last name"> 
     <span v-show="errors.has('last-name')" class="input__error">{{ errors.first('last-name') }}</span> 
    </div> 

    <repeatable-inputs v-model="person.mobiles" v-validate="'required'" data-vv-value-path="input" data-vv-name="mobile" type="tel" name="mobile" placeholder="Mobile" :inputmode="numeric" link-name="mobile number"></repeatable-inputs> 

    <div class="form-group"> 
     <input v-model="person.email" v-validate="'required|email'" data-vv-delay="500" name='email' type="text" placeholder="Personal email"> 
     <span v-show="errors.has('email')" class="input__error">{{ errors.first('email') }}</span> 
    </div> 

人物オブジェクト、同じcreatePerson.vueファイルの下で、空の配列として始まり携帯電話と呼ばれる性質を持っています。また、「次へ」ボタンをクリックしたときにすべての入力の検証を実行するvalidateAll（）関数もvee-validateドキュメントに記述されています。

<template> 
    <div> 
     <div class="form-group" v-for="(input, index) in inputs"> 
      <input 
       :type="type" 
       :name="name+index" 
       :placeholder="placeholder" 
       :inputmode="inputmode" 
       :value="input" 
       @input="update(index, $event)" 
       v-focus></input> 

     </div> 

     <a href="#" v-on:click.prevent="add">Add another {{linkName}}</a> 


    </div> 
    </template> 

    <script> 
     export default { 
      props: { 
       value: { 
        type: Array, 
        default: [''] 
       }, 
       type: { 
        type:  String, 
        default: "text" 
       }, 

       name:   String, 
       placeholder: String, 
       inputmode:  String, 

       linkName: { 
        type:  String, 
        default: "input" 
       } 
      }, 

      data: function() { 
       return { 
        inputs: this.value 
       } 
      }, 
      methods: { 
       add: function() { 
        this.inputs.push(''); 
       }, 

       update: function(index, e) { 
        this.inputs[index] = e.target.value; 
        this.$emit('input', this.inputs); 
       } 
      } 
     } 
    </script> 

validateAll（）関数で、私は、引用しなければならないドキュメントの状態を使用して、親createPerson.vueでこれらのカスタム入力を検証できるようにするには、： はその後、repeatableInputs.vueに、これがありますShould have a data-vv-value-path attribute which denotes how to access the value from within that component (Needed for validateAll calls)。

これは私が立ち往生したところです。そのvv-pathが指摘しなければならないことがわかりません。私は 'value'、 'input'、 'inputs'を使って試してみました。時計機能を作成しました。 v-forを使ったカスタム入力の検証でgitの問題が見つかりましたが、これは修正されているようです。

Answer 1

Data-vv-value-pathは、データがコンポーネントの状態のどこにあるかを指している必要があります。入力では、入力コンテンツをvモデルの属性でデータにバインドし、バリデータは検証する必要のある子コンポーネントのプロパティを認識します。

したがって、data-v-value-pathは子コンポーネント内のデータを指し、データはv-modelにバインドされると自動的に更新されます。