使用Vee-Validate和vue js 2验证提交时的子输入组件

Question

我目前正在尝试使用多个“输入字段”组件创建一个注册表单，一旦按下提交，这些组件都需要验证。 当文本内部发生变化时，它们都会自行验证，但我发现很难对所有输入字段进行全局调用以验证所有内容。 我想要实现的目标如下： http ： //vee-validate.logaretm.com/examples#validate-form

是的，这是这个问题的simmiler 使用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!');
        });
    }

这种方法基本上验证了你的信息的所有孩子（在这种情况下是单输入）。

- 更改了一个带有错误消息的span模板：

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

编辑：我只能猜到你的代码出了什么问题，但我相信你的情况下的问题是你必须在带有输入的组件下访问“直接”验证器 - 单输入，而不是信息组件。