Не могу удалить элемент input из списка — всегда удаляется последний?

Question

Ссылку на код прикрепляю, в общем дело такое если в поля ввести числа 1,2,3,4 и удалим первый элемент то удалится последний. Как эту ситуацию исправить?

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  methods: {
    delete1: function(){
        this.todos.splice(0, 1);
    },
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

https://jsfiddle.net/ztoqf456/

Answer 1

Нужно использовать для циклов специальный атрибут key

Специальный атрибут key в первую очередь нужен в качестве подсказки для Vue и его алгоритма виртуального DOM для идентификации VNode при сравнениях обновлённого списка узлов со старым. Без ключей Vue использует алгоритм, который минимизирует перемещения элементов и по-максимуму будет стараться изменять/переиспользовать элементы одного типа. При использовании ключей элементы будут переупорядочиваться в соответствии с изменением порядка следования ключей, а элементы, чьи ключи уже отсутствуют, будут всегда удаляться/уничтожаться.

В текущем случае можно сделать хоть так

<li v-for="(todo, i) in todos" :key="todo">

хоть так

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

чтобы Vue мог однозначно идентифицировать запись

БЛОГ НА HUSL

Не могу удалить элемент input из списка — всегда удаляется последний?

Ответы (1 шт):