Vue v-model 惰性修饰符不适用于数组元素

Question

我有一个对象数组，我使用 v-for 对其进行迭代，并为对象的一个属性创建一个输入，然后对该输入使用 vee-validate。我想延迟验证，所以我使用 v-model.lazy 仅在更改时更新，这就是问题发生的地方。数据绑定似乎没有正确发生。下面的 fiddle 重现了我的问题。任何建议将不胜感激。

https://jsfiddle.net/1r944gnc/

Vue.use(VeeValidate)

new Vue({
  el: '#app',
  data: {
    users: [
      {
        email: null
      }
    ]
  },
  methods: {

  }
})

<div id="app">
    <div v-for="user in users">
      <input type="text" name="foo" v-model.lazy="user.email" v-validate="'email'" />
      <span v-show="errors.has('foo')">{{ errors.first('foo') }}</span>
    </div>
</div>

Answer 1

我认为这是 VeeValidate 的一个错误。

有一个解决方法与您的愿望具有相同的效果：在 blur 事件

上验证

<div id="app">
    <div v-for="user in users">
      <div>Email: {{ user.email }}</div>
      <input type="text" name="foo" v-model="user.email" v-validate="'email'" data-vv-validate-on="blur"/>
      <span v-show="errors.has('foo')">{{ errors.first('foo') }}</span>
    </div>
</div>

演示 https://jsfiddle.net/4zjf2ph3/

Vue v-model 惰性修饰符不适用于数组元素

Vue v-model lazy modifier not working on array elements

vuejs2

vee-validate