javascript - VueJS 计算的道具不是反应式的

Question

前言

我正在尝试将一段数据用作子组件中的道具。我需要稍微修改一下这个道具以获得我想要的数据。我的问题是计算的道具不是反应性的。

我的数据看起来如何

{
    "SomeItem": "0",
    "DynamicItem1": "0",
    "SomeOtherDynamicItem": "0"
}

这是我的初始状态，我通过 JSON.transform() 将其转换为对象。重要的部分是可以有任意数量的动态项目。可以有DynamicItem10等等。

我在用数据做什么

该数据存在于我的父组件的数据对象中。每当我从我的 websocket 获得更新时，这就是我更改数据的方式：

Vue.set(this.nodes, node, value)

我从 vues docs 中的深度文档中得到了这个。这应该使动态添加的属性到数据对象的反应性，AFAIK。这可以正常工作，因为我可以在控制台中看到数据正在正确更新。

接下来，我通过 props 将此数据传递给我的子组件，如下所示：

<Step1 :nodes="nodes" style="grid-row-start: 1; grid-column-start: 1" />

在我的子组件中，我首先根据这个线程将道具分配给我的数据组件：

data() {
    return {
        localnodes: this.nodes
    };
}

因为我需要做一些过滤，所以我使用了一个计算属性：

computed: {
    width_nodes: function() {
        var widthnodes = {};
        for (var node in this.localnodes) {
            if (node.includes("DynamicItem")) {
                Vue.set(widthnodes, node, this.localnodes[node]);
            }
        }
        return widthnodes;
    }
}

问题

我希望每当我的父组件中的相应数据发生变化时，这个计算属性就会更新。然而事实并非如此。我可以在 vue devtools 中看到更改的数据，但计算的属性并未反映这些更改。这似乎与反应性更改检测警告直接相关，因为如果我将例如 DynamicItem2 添加到我的初始数据中，它会正确更新。

编辑：我如何使用 width_nodes

<tr v-for="(value, name) in width_nodes" :key="name">
    <td style="font-weight: bold;">{{ name }}</td>
    <td>{{ value }}</td>
</tr>

标签： javascriptvue.js