Vue中v-model.lazy修饰符在数组元素上绑定失效问题求助

我看了你的问题，核心问题出在两个地方：重复的name属性和v-model.lazy与VeeValidate校验时机的不匹配，咱们一步步来解决：

问题分析 #

1. 重复的name属性：你在v-for循环里给所有输入框都用了name="foo"，VeeValidate是通过name来区分不同字段的校验实例的，多个同名字段会导致校验状态混乱，进而干扰数据绑定的准确性。
2. v-model.lazy的时机冲突：v-model.lazy只会在输入框失去焦点时更新绑定值，但VeeValidate默认会在输入事件触发时校验，这就导致校验时，绑定的user.email还没完成更新，出现校验与数据不同步的情况。

解决方案 #

1. 给每个输入框设置唯一的name #

在v-for里利用循环索引（或对象的唯一标识）生成唯一name，确保每个输入框的校验实例独立：

<div v-for="(user, index) in users" :key="index">
  <input 
    type="text" 
    :name="`email-${index}`" 
    v-model.lazy="user.email" 
    v-validate="{ required: true, email: true }" 
  />
  <span v-show="errors.has(`email-${index}`)">{{ errors.first(`email-${index}`) }}</span>
</div>

2. 调整校验触发时机，匹配v-model.lazy的更新节奏 #

因为v-model.lazy在blur（失去焦点）事件时更新数据，我们可以让VeeValidate同步在blur事件触发校验，保证校验时数据已完成更新，有两种实现方式：

方式一：给单个输入框指定校验事件

直接在输入框上添加data-vv-validate-on="blur"属性：

<input 
  type="text" 
  :name="`email-${index}`" 
  v-model.lazy="user.email" 
  v-validate="{ required: true, email: true }"
  data-vv-validate-on="blur"
/>

方式二：全局配置校验触发事件

如果你的项目中多数字段都需要延迟校验，可以在初始化VeeValidate时全局设置：

Vue.use(VeeValidate, {
  events: 'blur' // 全局指定仅在失去焦点时触发校验
});

完整修正后的代码 #

Vue.use(VeeValidate, {
  events: 'blur' // 全局设置校验触发时机为blur
})
new Vue({
 el: '#app',
 data: {
  users: [
   { email: null }
  ]
 },
 methods: {
 }
})

<div id="app">
 <div v-for="(user, index) in users" :key="index">
  <input 
    type="text" 
    :name="`email-${index}`" 
    v-model.lazy="user.email" 
    v-validate="{ required: true, email: true }" 
  />
  <span v-show="errors.has(`email-${index}`)">{{ errors.first(`email-${index}`) }}</span>
 </div>
</div>

这样修改后，每个输入框的校验实例独立，校验时机与v-model.lazy的更新时机完全同步，数据绑定和校验功能就能正常工作了。

内容的提问来源于stack exchange，提问作者ExoAdmin