Vue.js - 無法正確驗證自定義的單個文件組件v-for使用vee-validate

Question

我一直在構建一個vue應用程序，我目前正在構建一個具有「Person」對象的組件，並且一些輸入字段用於添加有關該人的信息，例如姓名，地址，電子郵件等。其中一個字段是手機號碼，但一個人可以有多個號碼，因此我創建了一個自定義組件來重複輸入現場隨意。這大致是它的樣子。所有這些輸入都使用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> 

person對象，同樣createPerson.vue下的文件，有一個名爲移動屬性，它開始作爲一個空數組。它還有一個validateAll（）函數，如vee-validate文檔中所述，在單擊「Next」按鈕時對所有輸入進行驗證。 然後，在repeatableInputs.vue，有這樣的：

<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> 

爲了能夠在父createPerson.vue來驗證這些自定義輸入，使用validateAll（）函數，該文檔的狀態，我必須，報價， Should have a data-vv-value-path attribute which denotes how to access the value from within that component (Needed for validateAll calls)。

而這就是我卡住的地方。我不確定那個vv路徑必須指向，並且我嘗試使用'value'，'input'，'inputs'，創建一個watch函數，以及其他一些甚至沒有多少意義的東西。我發現了一個git問題，用於驗證使用v-for的自定義輸入，但顯然已被修復。

Answer 1

Data-vv-value-path應該指向數據在組件狀態內的位置。在您的輸入中，您可以使用v-model-attribute將輸入內容綁定到數據，然後驗證程序知道需要驗證的子組件的哪個屬性。

因此，data-vv-value-path指向子組件內的數據，數據將在綁定到v-model時自動更新。