Хорошо, принимая это по одному:
Удаление задачи
Причина, по которой всегда кажется, что последняя задача удаляется, заключается в том, что вы набираете элементы списка с помощью index,Когда вы заменяете весь массив items в своем методе delTodo, это, в свою очередь, дает вам новый массив с новыми ключами для каждого элемента в списке.Введите item, и вы получите правильный результат:
<todo v-for="(item, index) in items" :key="item" :item.sync="item" v-on:deletetodo="delTodo(item)"></todo>
Отображение задач по одному при загрузке
Мой совет - подходить к показу / скрытиюзадач с вычисляемым свойством:
computed: {
tasks: function(){
return this.items.filter(item => item.isVisible);
}
}
Здесь мы покажем / скроем, переключая isVisible для каждой задачи.
Это означает, что когда вы изначально загружаете задачи из локального хранилища, выможно установить для них все значение isVisible: false, а затем использовать setTimeout в цикле for, чтобы отобразить их все по одному:
mounted() {
// Get your items and set all to hidden
if (localStorage.items) {
this.items = JSON.parse(localStorage.getItem("items"))
.map(item => item.isVisible = false);
}
// Loop through and show the tasks
for(let i=1; i<=this.items.length; i++){
// Where 300 is milliseconds to delay
let delay = i * 300;
setTimeout(function(){
this.items[i].isVisible = true;
}.bind(this), delay);
}
},