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 等数组方法，因此如果数组长度 < 2 this.array[2] = obj 将不起作用，但 this.array.push(obj) 会按预期工作。在其他情况下，$set(...) 是将元素标记为可观察所必需的。

Vue：更新深度不会触发重新渲染

Vue : Updating deep dosn't trigger re-rendering

vue.js

vue-reactivity