向对象添加新键时触发 Vue.js 反应性

Question

我正在使用以下函数向对象添加新的 key/value 对。

                .then(response => {
                    this.plantRegisteredMaterials = response.data.tenantPlantMaterials.edges;
                    this.plantRegisteredMaterials.forEach(plantMaterial => {
                        this.materials.forEach(tenantMaterial => {
                            if (
                                tenantMaterial.node.id ==
                                plantMaterial.node.material.id
                            ) {
                                tenantMaterial.node.isRegistered = true; //This is the new key I want Vue to recognize
                            } else tenantMaterial.node.isRegistered = false; //This is the new key I want Vue to recognize
                        });
                    });
                });

此对象在 v-data-table 上用作 items。

然而，当我将这个新的 key/value 对添加到对象时，Vue 无法识别它并且 v-data-table 不会检测到这些更改，除非我单击 [=15= 之类的东西] 或任何其他强制 DOM 重新渲染的内容。

我知道有一些方法可以强制 Vue 识别这些更改。我应该怎么做？

我尝试了 JSON.parse 和 JSON.stringify()，正如我在其他一些主题中读到的那样，但它似乎不起作用。

Answer 1

Vue 无法检测到向对象添加新键。 (source)

您有两个选择：

1：使用 this.$set(tenantMaterial.node, 'isRegistered', true)

添加新密钥

2：在将其分配给响应式 Vue 对象之前完全构造一个普通 Javascript 对象：

const plantRegisteredMaterials = response.data.tenantPlantMaterials.edges

plantRegisteredMaterials.forEach(plantMaterial => {
  // Add, remove, change keys of plantMaterial
  ...
})
this.plantRegisteredMaterials = plantRegisteredMaterials

向对象添加新键时触发 Vue.js 反应性

Triggering Vue.js reactivity when adding a new key to an object

vue.js

vue-reactivity