vue.js - 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 控制台中进行评估，它必须给出 forthis.customer和它的任何项目，例如：{__ob__: Observer}并且在扩展视图中必须包含一个 item __ob__: Observer {value: {…}, dep: Dep, vmCount: 0}。这些类型的错误在 vue 中是最烦人的。

对象和数组元素只有在它们存在时才会被观察到。push像,这样的数组方法也splice被观察到，所以this.array[2] = obj如果数组长度 < 2 将不起作用，但this.array.push(obj)可以按预期工作。在其他情况下$set(...)，有必要将元素标记为可观察的。