Question

我有一个对象数组，我用v-for迭代并为对象的一个属性创建一个输入，并在该输入上使用vee-validate。我想懒惰地验证，所以我使用v-model.lazy仅在更改时更新，这就是问题发生的地方。数据绑定似乎没有正确发生。以下小提琴再现了我的问题。任何建议都将不胜感激。

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 lazy修饰符不适用于数组元素

1 个答案: