javascript - 如何让 Vue.js 对动态添加的数组属性的更改使用react？

Question

在 Vue.js 中，我有一个数据对象，它具有动态添加/编辑的属性，这些属性本身就是数组。例如，属性开始如下:

data: function () {
    return {
        vals: {}
    };
}

随着时间的推移，通过各种按钮点击等操作，vals 可能如下所示(实际属性名称和值根据多种因素是 100% 动态的):

vals: {
    set1: [
        {
            prop1: 123,
            prop2: 'hello'
        },
        {
            prop1: 456,
            prop2: 'bye'
        }
    ],
    set2: [
        {
            prop3: 'Why?!',
            prop4: false
        }
    ]
}

随着数组属性(即 set1 和 set2)的更改，我希望能够对这些更改使用react。

例如，我可能会在我的代码中执行如下操作:

var prop = 'set1';

this.vals[prop].push({
    {
        prop1: 789,
        prop2: 'hmmm...'
    }
});

但是，当我这样做时，组件没有更新(我推测是因为我将一个对象推到对象子数组的末尾；而 Vue.js 似乎没有跟踪这些更改)。

在上面的 push 之后，我已经能够通过执行 this.$forceUpdate(); 来强制组件响应，但我想必须有一个当涉及到将对象推到对象子数组的末尾时，让 Vue.js 变得 react 的更有说服力的方式。

有谁知道有更好的方法来尝试实现我想要实现的目标吗？谢谢。

Answer 1

任何时候向对象添加新属性或更改数组中的值时，都需要使用 Vue.set() .

Vue.set(this.vals, prop, [ /* ... */ ])

理想情况下，您应该预先定义所有属性，这样 Vue 就不必根据数据模型的形状使计算属性无效。即使您将它们设置为 null，您也应该尝试映射出您希望组件需要的所有属性。

此外，在您的第一个代码块中，您在 return: 之后有一个冒号，它将评估为一个标签，这意味着您的数据函数不会返回任何内容。