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

重现该错误的步骤：

1. 在第二行中键入内容。
2. 删除第二行。

结果： 前三行（现在为第二行）被标记为包含错误，即使未被触摸也是如此。

注意 我也已将issue提交到了经过审核的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}]