2

我已经删除了我的代码中大部分无用的部分，所以如果这段代码没有真正的意义，请不要担心，它只是向你展示什么不起作用。

首先，我从一个名为的基本数组创建一个数组objects：

objects: [
        {
          text: "I dont trigger stuff",
        },
        {
          "text": "I dont trigger stuff",
        },
        {
          text:"I trigger stuff",
          activated: undefined,
        },
],

和创建功能

created() {
    const newArray = [];

    this.objects.forEach(anObj => {
      anObj.activated = false;
      newArray.push(anObj);
    });

    this.filteredObjects = newArray;
},

我将一个属性初始化activated为false. 在我的真实代码中，我没有使用 a forEach，而是 afind但结果是相同的。

然后，我显示几个按钮来触发“激活”

<button
    v-for="(myObj, index) in filteredObjects"
    :key="index"
    @click="activateObject(myObj, index)">
    {{ myObj.text }}
</button>

被触发的功能是这个：

activateObject(anObj, anObjIndex) {
      this.$set(this.filteredObjects[anObjIndex], 'activated', !anObj.activated)
},

我的目标只是更新activated属性。

为了检查反应性是否有效，我有一个观察者：

watch: {
    filteredObjects: {
      handler() {
          alert('called')
      },
      deep: true,
    }
},

我有两个问题：

1/由于所有对象的所有activated属性都设置false为，为什么只有一个工作，属性最初设置为的那个undefined？

2/ 如果我将激活函数更新为：

activateObject(anObj, anObjIndex) {
      anObj.activated = !anObj.activated;
      this.$set(this.filteredObjects, anObjIndex, anObj);
},

它运作良好。有人可以解释一下为什么，有什么区别？

在这两种情况下，VueJS Devtools 在单击刷新时都会显示更新的值。这是一个反应性问题。

你可以在这里找到一个小提琴：

https://jsfiddle.net/dv1jgneb/

4

1 回答 1

1

从文档：

由于 Vue 在实例初始化期间执行 getter/setter 转换过程，因此数据对象中必须存在一个属性，以便 Vue 转换它并使其具有响应性。

这就解释了为什么只有第三个按钮“触发东西”。

因此，您可以在 中添加该属性data()，或者如文档中所述，使用this.$set：

this.objects.forEach(anObj => {
  this.$set(anObj, 'activated', false);
  newArray.push(anObj);
});

JS小提琴

希望这可以帮助！

于 2019-02-14T18:58:41.387 回答