vuelidate 中集合验证的奇怪行为

Question

我做了下面这个最小的例子，也可以在this fiddle中测试：

HTML:

<div id="app">
  <div v-for="(gameV, index) in $v.games.$each.$iter">
    <input type="text" :class="{error: gameV.$error, dirty: gameV.$dirty}" v-model="gameV.name.$model" />
    <input type="button" value="-" @click="games.splice(index, 1)" style="cursor: pointer;"/>
  </div>
  <input type="button" value="+" @click="games.push({name: ''})" style="cursor: pointer; margin-top: 5px;"/>

  <div v-if="$v.$invalid" style="color: red; margin-top: 1em;">Form invalid</div>
  <pre>{{ $v }}</pre>
</div>

JS:

Vue.use(vuelidate.default)

new Vue({
  el: "#app",
  data: {
    games: [{name: "Fallout"}, {name: "WoW"}, {name: ""}]
  },
  validations: {
    games: {
        $each: {
        name: {
            required: validators.required
        }
      }
    }
  }
})

重现错误的步骤：

在第二行输入内容。
删除第二行。

结果： 之前的第三行（现在是第二行）被标记为包含错误，即使它没有被触及。

备注我还在 vuelidate github-repo 上提交了一个 issue，但由于有许多未解决的问题，我决定也在这里提出问题。

Answer 1

https://jsfiddle.net/jacobgoh101/cqye5van/

您可以使用 $trackBy 来解决这个问题。

如果使用$trackBy: 'id'，验证将根据每个游戏中的id进行区分。数组中的每个游戏对象都需要有一个唯一的 ID 才能工作。

例如games: [{name: "Fallout", id: 1}, {name: "WoW", id: 2}, {name: "", id: 3}]

vuelidate 中集合验证的奇怪行为

Strange behaviour of collection-validation in vuelidate

vue.js

vuelidate