Я сделал следующий минимальный пример, который также можно протестировать в этой скрипке:
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, но, поскольку остается много вопросов, на которые нет ответа, я решил задать вопрос и здесь.