Vee-Validateとvue jsを使用してサブミット時に子入力コンポーネントを検証する2

Question

現在、複数の「入力フィールド」コンポーネントで登録フォームを作成しようとしています。それらは現在、内部のテキストが変更されたときに、それぞれが独自に検証しますが、すべての入力フィールドをグローバルに呼び出してすべてを検証することは困難です。私は何を達成しようとしていることは以下の通りです：http://vee-validate.logaretm.com/examples#validate-form

はい、これがこの質問Validate child input components on submit with Vee-Validate にsimmilerである。しかし、私はsingleInput.vue

<template lang="html"> 
    <div :class="'col m'+col"> 
    <div class="input-field"> 
     <i v-if="icon" class="material-icons prefix">{{icon}}</i> 
     <input 
     v-if="area" 
     :type="type" 
     @input="onChange" 
     :id="id" 
     :required="required" 
     :name="id" 
     v-validate="'required'" 
     /> 
     <textarea 
     v-if="!area" 
     @input="onChange" 
     :id="id" 
     :required="required" 
     :name="id" 
     class="materialize-textarea"></textarea> 
     <label :for="id"> 
     {{label}} 
     <span v-if="required" class="red-text">*</span> 

     </label> 
     <span class="red-text error">{{$store.state.errors[id]}}</span> 
    </div> 
    </div> 
</template> 

<script> 

export default { 
    name:'single-input', 
    props: { 
    col:{ 
     type: Number, 
     default:6 
    }, 
    id:{ 
     type: String, 
     required:true 
    }, 
    required:{ 
     type:Boolean, 
     default: true 
    }, 
    label:{ 
     type:String, 
     required:true 
    }, 
    onChange:{ 
     type:Function, 
     required:true 
    }, 
    area:{ 
     type: Boolean, 
     default: true 
    }, 
    type:{ 
     type: String, 
     default: "text" 
    }, 
    icon:{ 
     type:String 
    }, 
    validation:{ 

     type:String 
    } 
    } 
} 
</script> 

<style lang="css"> 

</style> 

とInfo.vue

を持って

を理解しません

<template lang="html"> 
    <div class="row"> 
    <single-input v-for="(info,i) in informations" :id="info.id" :label="info.label" :onChange="onChange" :area="info.area" :key="i" :required="info.required" :col="info.col" :type="info.type" :icon="info.icon"></single-input> 

    </div> 
</template> 

<script> 
import SingleInput from "./SingleInput"; 
export default { 
    name: 'info', 
    methods:{ 

    onChange(e){ 

    } 
}, 
    data(){ 
    return{ 
     informations:[ 
     { 
      label: "First Name", 
      id: "fname", 
      icon: "person" 
     }, 
     { 
      label: "Last Name", 
      id: "lname", 
      required:false, 
      icon: "person" 
     }, 
     { 
      label: "Email", 
      id: "email", 
      type:"email", 
      icon:'email' 
     }, 
     { 
      label: "Telephone", 
      id: "phone", 
      type:"text", 
      icon:'phone' 
     }, 
     { 
      label: "Department", 
      id: "depa", 
      type:"text", 
      icon:'domain' 
     }, 
     { 
      label: "Organization", 
      id: "org", 
      type:"text", 
      icon:'account_balance' 
     }, 
     { 
      label: "Address", 
      id: "address", 
      icon:'directions', 
      area: false, 
      col:12 
     }, 
     { 
      label: "City", 
      id: "city", 
      type:"text", 
      icon:'place' 
     }, 
     { 
      label: "Post code", 
      id: "post", 
      type:"text", 
      icon:'pin_drop' 
     } 

     ] 
    } 
    }, 
    components:{ 
    SingleInput 
    } 
} 
</script> 

<style lang="css"> 
</style> 

私は全力を尽くしていますが、info.vueのエラーにアクセスすることはできません

お手数をおかけしますようお願い申し上げます。

Answer 1

あなたの例では、私は、任意の検証試行を参照してくださいが、ここではjsfiddleの私の実施例であることはできません。link私がやった

： は、情報コンポーネントに

submit: function(){ 
     var validationArray = this.$children.map(function(child){ 
     return child.$validator.validateAll(); 
     }); 

    window.Promise.all(validationArray).then((v) => { 
      alert('From Submitted!'); 
     }).catch(() => { 
      alert('Correct them errors!'); 
     }); 
    } 

この方法を提出-addメソッドは基本的にあなたの情報のすべての子（この場合は単一入力）を検証します。

は、エラーメッセージが表示されてスパンのビットテンプレートを-changed：

{{ ($validator.getErrors().errors.length > 0) ? $validator.getErrors().errors[0].msg : '' }} 

編集：私はあなたのコードが間違っていたものguesことができますが、私はあなたのケースでは、その問題あなたがする必要があるということであった事実を信じ 入力があるコンポーネントの下にある "直接"バリデータにアクセスします。