vue.js - vuelidate 中集合验证的奇怪行为

Question

我做了以下最小的例子，也可以在这个小提琴中进行测试：

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
        }
      }
    }
  }
})

重现错误的步骤：

1. 在第二行输入一些东西。
2. 删除第二行。

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

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

Answer 1

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

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

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

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