使用Vee-Validate和vue驗證子輸入組件js 2

Question

我目前正在嘗試創建一個註冊表單，其中包含多個「輸入字段」組件，一旦按下提交按鈕後，所有組件都需要驗證。當它們中的文本被改變時，它們全部目前都自行驗證，但是我發現難以對所有輸入字段進行全局調用來驗證所有內容。我想實現如下：http://vee-validate.logaretm.com/examples#validate-form

是的，這是simmiler這個問題Validate child input components on submit with Vee-Validate 但我不明白

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

我做了什麼： -add提交方法信息組件

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!'); 
     }); 
    } 

這方法基本上驗證您的信息的所有孩子（在這種情況下單一輸入）。

-changed跨度有點模板與錯誤消息：

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

編輯： 我只能客串什麼是錯誤的與您的代碼，但我相信你的情況是事實，你有這個問題訪問具有輸入的組件的「直接」驗證器 - 單輸入，而不是信息組件。