咨询电话:
15628812133
01
2024/01

如何解决vue深层数组修改后不渲染问题

发布时间:2024-01-01 16:05:59
发布者:MaiMai
浏览量:
0

在从后台获取复杂数据类型时,有时我们会有从本地添加属性的需求。 如图, `item.hover` 是动态添加到 `changeUserList` 数组中的属性,后台的对象数组中没有 `hover` 这个键,Vue 默认情况下并不会对动态添加的属性进行响应式处理。

改变变量值

这种写法就会导致在控制台可以正常打印,但在HTML结构中却不会进行一些响应式的变化。

这种情况通常发生在动态添加属性或者键到对象上时,因为 Vue 默认只会对初始化时就存在的属性进行响应式处理。

为了让 Vue 能够对动态添加的属性进行响应式处理,可以使用 `Vue.set` 或 `this.$set` 方法将具体属性添加到数组的每个对象中。示例如下:

强制修改变量

除此之外还有一个解决方法是使用 `$forceUpdate()` 强制更新视图。这个方法会重新渲染整个组件,但不推荐频繁使用,因为它可能会影响性能。


关键词:
返回列表