Странное поведение проверки коллекции в vuelidate

Я сделал следующий минимальный пример, который также можно протестировать в этой скрипке:

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


person Nils-o-mat    schedule 18.09.2018    source источник


Ответы (1)


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

Вы можете использовать $trackBy, чтобы решить эту проблему.

введите здесь описание изображения

Если вы используете $trackBy: 'id', проверка будет дифференцироваться в зависимости от идентификатора в каждой игре. Для этого у каждого игрового объекта в массиве должен быть уникальный идентификатор.

e.g. games: [{name: "Fallout", id: 1}, {name: "WoW", id: 2}, {name: "", id: 3}]

person Jacob Goh    schedule 18.09.2018