使用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 : '' }} 

编辑： 我只能客串什么是错误的与您的代码，但我相信你的情况是事实，你有这个问题访问具有输入的组件的“直接”验证器 - 单输入，而不是信息组件。