Vue.js - Kann eine benutzerdefinierte Einzeldatei-Komponente nicht mit v-validieren ve-validate

Question

Ich habe eine Vue-App gebaut und ich baue gerade eine Komponente, die ein Objekt "Person" hat, und ein paar Eingabefelder, um Informationen über diese Person hinzuzufügen, wie Name, Adresse, E-Mail usw. Eines dieser Felder ist die Handynummer, aber eine Person kann mehr als eine Nummer haben, also habe ich eine benutzerdefinierte Komponente erstellt, die die Eingabe wiederholt Feld nach Belieben. So sieht es ungefähr aus. Alle diese Eingaben werden mit vee validate validiert. Das ist ungefähr das, was ist wie folgt aussieht:

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

Die Person, Objekt, unter der gleichen createPerson.vue Datei, die Eigenschaft hat, Handys genannt, die als ein leeres Array beginnt. Es verfügt auch über eine validateAll() - Funktion, die wie in den ve-validate-Dokumenten beschrieben verwendet wird und eine Validierung aller Eingaben durchführt, wenn auf eine Schaltfläche "Weiter" geklickt wird. Dann wird auf der repeatableInputs.vue, gibt es diese:

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

Um diese benutzerdefinierten Eingaben in der übergeordneten createPerson.vue, mit der validateAll() Funktion, der docs Zustand, muß ich zu validieren, zu zitieren, Should have a data-vv-value-path attribute which denotes how to access the value from within that component (Needed for validateAll calls).

Und das ist, wo ich stecken geblieben bin. Ich bin mir nicht sicher, ob dieser vv-Pfad darauf zeigen muss, und ich habe versucht, 'Wert', 'Eingabe', 'Eingaben' zu verwenden, eine Überwachungsfunktion zu erstellen und einige andere Dinge, die nicht viel Sinn ergeben. Ich habe ein Git-Problem mit der Validierung von benutzerdefinierten Eingaben gefunden, die v-for verwendet haben, aber das wurde anscheinend seither behoben.

Answer 1

Data-vv-value-path sollte auf die Position der Daten im Komponentenstatus zeigen. Auf Ihrer Eingabe können Sie den eingegebenen Inhalt mit einem v-model -attribut an Daten binden, und dann weiß der Validierer, welche Eigenschaft der untergeordneten Komponente er validieren muss.

So Daten-VV-Wert-Pfad verweist auf die Daten in der untergeordneten Komponente und die Daten werden automatisch aktualisiert, wenn mit V-Modell gebunden.