Javascript VueJS：对象的反应数组

这听起来可能微不足道，但事实并非如此。因此，总结一下：

我们有一个对象数组（最初为空）存储在数据中

在创建组件时，我们通过自定义fabric方法将一些对象添加到数组中

Fabric方法接受基本对象，并使用一些附加道具对其进行扩展

fabric方法添加的一个道具是对数据的引用（

this.foo

）

问题：生成的对象不是反应性的，并且不会对

此.foo

更改作出反应

演示：

到目前为止，我所尝试的：

使用hack返回新的

Vue（…）

以使对象具有反应性（）

使用

$set

在fabric方法中设置其他属性

所以问题是：我们如何使对象反应

---

另外，我知道可以选择使用watchers/computed，但在这种情况下不行。我希望对象是被动的，而不是手动更新整个对象数组。

好吧，问题是当您这样做时

{ foo: this.foo }

您只需将存储在this.foo中的实际值传递给新的objects foo属性，在实例化时该属性为0，这就是javascript如何处理基本值的方式

如果不想使用计算属性或观察者，可以使用对象而不是原语值，原语值是通过引用而不是通过值分配的

因此，您可以在数据对象中定义foo属性，如下所示：

foo: {val: 0}

在addedProps中指定您的值，如下所示

{foo: this.foo}

setInterval(() => this.foo.val++, 250);

然后像这样增加值

{foo: this.foo}

setInterval(() => this.foo.val++, 250);

这是用上面的代码修改过的代码

---

谢谢，

您可以尝试将阵列中的对象替换为具有所有必要道具的新对象。这样，对象就变成了反应对象。对象中的所有道具必须先存在，然后该对象才能位于数据段本身或数组中。或者，您应该使用$set来添加所有新道具。