Как с помощью Vue удалить элементы с экрана после того, как они были удалены?

Я изучаю Vue, и у меня есть список задач с флажком, который я могу отметить как завершенный. В моем приложении все работает.

Когда я устанавливаю флажок, я добавляю элементы в массив completedItems. Когда флажок не установлен, я удаляю элементы. Я могу проверить длину массива, и это также правильно.

У меня есть кнопка, которую я могу нажать, чтобы удалить все элементы, отмеченные как завершенные, из моего списка.

Общая логика работает нормально. Статус пометки как завершенный работает, и фактическая запись удаляется, как и ожидалось.

Однако я не могу удалить элемент из фактического представления. Я не уверен, что я делаю неправильно - неправильно обновляю свой массив completedItems или что-то в этом роде. Элементы, которые я удаляю, исчезнут только после полного обновления страницы.

Вот что я делаю:

<task v-for="item in list.items">...</task>




...
data() {
    return {
        completedItems: [],
    }
},
props: ['list'],

...

axios.delete(...)
.then((response) => {
if (response.status === 204) {
    this.completedItems = this.completedItems.filter(i => i !== item);
} else {
    console.error('Error: could not remove item(s).', response);
}).catch((error) => {
    alert(error);
});

Спасибо за любые предложения!

ИЗМЕНИТЬ

Вот как я сейчас проверяю совпадение, и оно работает правильно, элемент в массиве все еще не удаляется со страницы.

this.completedItems = this.completedItems.filter(i => i.id !== item.data.id); 
 // i.id = 123
 // item.data.id = 123

vue.js vuejs2 vue-component
person Damon    schedule 08.09.2019    source источник
comment
Если «предмет» является сложным объектом, вы не можете сравнивать через === или подобное внутри filter(). Вам нужно сравнить определенное свойство, такое как id или какой-либо другой уникальный идентификатор, чтобы отфильтровать.   -  person Alexander Staroselsky    schedule 09.09.2019
comment
Это... У меня может быть несколько списков. Из каждого списка я могу пометить любой элемент как completed. Я буду экспериментировать с конкретными значениями. Спасибо за предложение!   -  person Damon    schedule 09.09.2019
comment
Концепция работает с механизмами, которые вы используете. Я сделал упрощенный пример, который может помочь: jsfiddle.net/e840y6of.   -  person Patrick Stephansen    schedule 09.09.2019
comment
Ах, кажется, я вижу проблему. Я передаю свой оригинальный list в качестве реквизита. props: ['list'], Затем перебираем это. Итак, чтобы удалить элемент с экрана, мне нужно обновить исходный список, переданный в качестве реквизита.   -  person Damon    schedule 09.09.2019

Ответы (1)


arrow_upward
0
arrow_downward

Вам следует избегать прямого манипулирования реквизитами, поскольку реквизиты предоставляются родительским компонентом и могут быть изменены без предварительного уведомления. Я бы сделал что-то вроде этого:

data(){
    return{
        completedItems[],
        localList: this.list
    }
}

Затем манипулируйте и привяжите массив localList вместо опоры, это должно дать вам то, что вы ищете.

person jacob13smith    schedule 09.09.2019
comment
Большое спасибо! Это помогло мне указать правильное направление. Спасибо всем за их предложения! - person Damon; 09.09.2019