Vee Validate 仅验证最后一项答案

【问题标题】：Vee Validate Only Validating Last ItemVee Validate 仅验证最后一项
【发布时间】：2020-02-11 23:10:27
【问题描述】：

我继承了一个使用 Vee Validate 2.x 的 Vue 站点，该站点的表单输入滞后严重。

我迁移到 3.2.4 (vue 2.6.10) 并遵循迁移指南，但我只看到验证检查我的最终输入。

这是修改后的代码：

<ValidationObserver ref="form">
    <form @submit.prevent="submit">
         <div v-for="formField in form.fields">
              <ValidationProvider name="formField.label" rules="required" v-if="formField.type != 'select'" v-slot="v">
                   <input 
                      :type="formField.type"
                      :placeholder="formField.placeholder"
                      v-model="formField.value"
                   >
                   <span class="text _warning" >{{ v.errors[0] }}</span>
               </ValidationProvider>

               <ValidationProvider name="formField.label" rules="required" v-if="formField.type == 'select'" v-slot="v">
                    <select v-model="formField.value" class="content_input input -select -arrow">
                        <option :value="null" disabled="disabled" selected="selected">Select {{formField.label}}</option>
                        <option v-bind:value="option.value" v-for="option in formField.options" :value="option.value" >{{option.label}}</option>
                    </select>
                    <span class="text _warning" >{{ v.errors[0] }}</span>
               </ValidationProvider>
         </div>
         <button class="button input" type="submit"> 
             {{form.data.submitText}}
         </button>
      </div>
   </form>
</ValidationObserver>

import { extend } from 'vee-validate';
import { required, email } from 'vee-validate/dist/rules';

extend('email', email);

extend('required', {
   ...required,
  message: 'This field is required'
});

export default {
...
    methods: {
        submit() {
            this.$refs.form.validate().then(success => {
                if(!success) {
                    return;
                }
                ...
            });
        }
    }
}

【问题讨论】：

标签： vue.js vee-validate

【解决方案1】：

一个非常小的错误 - 需要为 ValidationProvider 组件提供唯一名称，并且您已设置属性 name="formField.label" 将其设置为字符串“formField.label”。你的意思是将它设置为:name="formField.label"（注意额外的冒号）。一旦你这样做了，它就会起作用。

【讨论】：

请注意，如果您不想覆盖 name（例如，如果您使用 name 字段显示在错误消息中，则可以使用 vid 而不是 name ) (src: logaretm.github.io/vee-validate/advanced/…)
如果有人必须为多个字段使用相同的名称，那么他们必须为所有这些相同名称的字段提供具有唯一值的“vid”，然后 vee validate 将显示所有相同名称的错误消息字段。