Vue: Обновление глубокого не вызывает повторного рендеринга

Question

У меня есть массив, который выглядит примерно так:

customers : [ {customer : 'foo', address : {postalCode : 6655, city : 'somewhere'}}, ..
]

Я отображаю список примерно так:

<template v-for="(cust, inx) in customers">
<div>{{ customers[inx].customer }}</div>
<div>{{customers[inx].address.postalCode }}|{{ customers[inx].address.city}}</div>
</template>

Теперь у меня есть функция, которая получает город, когда люди вводит новый почтовый индекс, выбирает город и задает его с помощью:

this.$set(self.customers[inx].address, 'city', 'NewCityName');

Дело в том, что я могу подтвердить, что текст действительно изменен в правильном объекте, но он не вызывает повторную визуализацию. В этом случае я неправильно использую функцию $ set?

Answer 1

Возможно, this.customers установлен неправильно (не помечен как наблюдаемый), т. Е. Не объявлен в данных, таких как {customers:[]}, или любой из его элементов установлен неправильно. Если вы оцениваете в консоли devtools, она должна выдавать за this.customer и любой из ее элементов что-то вроде: {__ob__: Observer} и в расширенном представлении должна содержать элемент __ob__: Observer {value: {…}, dep: Dep, vmCount: 0}. Эти типы ошибок наиболее раздражают в vue.

Объекты и элементы массива наблюдаются, только если они существуют. Методы массива, такие как push, splice, также наблюдаются, поэтому this.array[2] = obj не будет работать, если длина массива <2, но <code>this.array.push(obj) работает должным образом. В других случаях $set(...) необходимо пометить элемент как наблюдаемый.