Vuejs2：数组更改时如何重新渲染数组计算属性

Posted 2023-02-23

【中文标题】Vuejs2：数组更改时如何重新渲染数组计算属性

【英文标题】：Vuejs2: How to re-render array computed properties when array changed

【发布时间】：2017-05-29 04:04:58

【问题描述】：

我有一个名为 List 的数组，并为他创建了计算属性 computedList。 当我更新数组的值时，它没有显示在 html 中，但在控制台中我看到 thar 数组已更新。

`https://jsfiddle.net/apokjqxx/69/`   

对数组使用计算属性的最佳方法是什么？

是否存在触发重新渲染计算属性的方法？

【问题讨论】：

一些代码会有所帮助。你有一个显示问题的jsfiddle吗？如果它们引用的属性也更新了，计算属性应该可以正常工作并显示更新的值

代码在这里jsfiddle.net/apokjqxx/69。默认情况下，计算属性适用于对象而不适用于数组。

这是一个 vuejs 限制，如果您直接以这种方式修改数组，它就无法获取更改。 vuejs.org/2016/02/06/common-gotchas

【参考方案1】：

由于 javascript 的限制，Vue 无法检测到对数组的更改，如下所示：this.list[1] = 'vueman'

您必须使用Vue.set 或vm.$set 解释here 来触发反应系统中的状态更新，如下所示：

  this.$set(this.list, 1, 'vueman')

查看更新的提琴手here。

【讨论】：

谢谢！工作正常。我还更新了 jsfiddle 以使用 multidemensoal 数组，希望它对任何人都有帮助 - jsfiddle.net/apokjqxx/73