склейка в javascript (vue) не работает должным образом после динамического добавления класса - PullRequest
Новая
       41

склейка в javascript (vue) не работает должным образом после динамического добавления класса

0 голосов
/ 21 сентября 2019

Я пытаюсь удалить элемент из массива методом сращивания массива.Я также использую animate.css и динамически добавляю класс 'fadeOutDown' перед удалением элемента.Затем я использую функцию тайм-аута, чтобы дождаться завершения анимации и удалить элемент из массива с помощью индекса.

Когда я нажимаю кнопку удаления, индекс элемента выполняет анимацию, но дополнительно в следующий разИндекс также удаляется из DOM, но не из массива.

Ниже html и js-функция для удаления элемента: 


<ul class="list-group todos mx-auto text-light">
  <li v-for="(todo , i) in filterTodo" :key="i" 
   class="list-group-item d-flex justify-content-between align-items-center 
   animated slideInUp slow">
   <span>{{ todo }}</span>
   <i @click="removeTodo(i , $event)" class="fa fa-trash-o delete">x</i>
  </li>
</ul>


removeTodo(id, e) {
  e.target.parentElement.classList.remove("slideInUp");
  e.target.parentElement.classList.add("fadeOutDown");
  setTimeout(() => {
    this.todos.splice(id, 1);
  }, 1000);
}

1 Ответ

0 голосов
/ 21 сентября 2019

Проблема в том, что при использовании index в качестве key. 

<li
  v-for="(todo , i) in filterTodo"
  :key="i" // this will make that bug.
...

Не следует использовать index в качестве key, особенно если массив может быть обновлен .

Вместо использования index в качестве ключа, лучше использовать уникальную строку или index в каждом элементе filterTodo.

Еслиtodo уникален , вы можете использовать его как ключ, как показано ниже: 

<li
  v-for="(todo , i) in filterTodo"
  :key="todo"
...
...