Почему не обновляется список при изменении данных во Vue?

Question

[vetsmen]

Есть вычисляемое свойство:

computed: {
			selectedData() {
				let items = this.selectedItems;
				let itemsLength = Object.keys(items).length;
				if(itemsLength < 8) {
					for(let i = 1; i <= (8 - itemsLength); i++) {
						items[-i] = {};
					}
				}
				return items;
			}
		}

Есть список:

<div v-for="item in selectedData">
					<span class="number">{{ item.title }}</span>
				</div>

При изменении this.selectedItems метод selectedData не срабатывает. В чем проблема?

Comments

[Алексей Ярков]

Начнем с того, что это не метод.
Вы лучше покажите код, который мутирует массив.

[vetsmen]

Алексей Ярков,

addToItems(id) {
				let items = this.items;
				items.forEach(item => {
					if(item.id == id) {
						this.selectedItems[id] = item;
						return;
					}
				});
			}

[Сергей delphinpro]

vetsmen, У Vue документация на русском я зыке есть!
И там прямо отдельным параграфом написано:

Из-за ограничений JavaScript, Vue не способен заметить следующие изменения в массиве:

1. Прямую установку элемента по индексу, например:
vm.items[indexOfItem] = newValue
2. Явное изменение длины массива, например:
vm.items.length = newLength

Обойти первую проблему можно двумя способами, оба из которых не только дадут эффект аналогичный vm.items[indexOfItem] = newValue, но и инициируют реактивные обновления состояния приложения:

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

Для обхода второй проблемы используйте splice:

example1.items.splice(newLength)

Чаще и внимательнее читайте документацию и прибудет с вами сила.

Answer 1

[0xD34F]

Vue не отслеживает добавления свойств объектов. Назначайте значения свойств selectedItems с помощью $set.

Т.е., вместо

this.selectedItems[itemName] = item

делайте так

this.$set(this.selectedItems, itemName, item)

Ну и соответственно, $delete - для удаления свойств.

Comments

[vetsmen]

А почему, когда я ссылаюсь на let items = this.selectedItems; и далее работаю только с переменной items, на выходе все равно изменяется this.selectedItems, то есть items работает в роли ссылки на this.selectedItems? Как сделать так, чтобы items был экземпляром объекта this.selectedItems?

[0xD34F]

vetsmen, наверное, всё-таки не экземпляром, а копией. Можно так:
let items = Object.assign({}, this.selectedItems)
или так:
let items = { ...this.selectedItems }

[alchen777]

Добрый день! А как мне сделать, если у меня массив двумерный, т.е. надо например обновить вот так: this.depth[i][0] = depth.bids[i][0];

Я пробовал this.$set(this.depth[i], 0, depth.bids[i][0]); Но так не работает...

[0xD34F]

alchen777, должно работать. Что может быть не так - без понятия, я не ясновидящий. Может, нет this.depth[i].