Question

我试图在Vue.js中可视化树形结构。

一棵小树如下所示：

{
"label": "outlook",
"edges": {
    "== sunny": {
        "label": "== sunny",
        "node": {
            "label": "humidity",
            "edges": {
                "<= 82": {
                    "label": "<= 82",
                    "node": {
                        "label": true
                    }
                },
                "> 82": {
                    "label": "> 82",
                    "node": {
                        "label": false
                    }
                }
            }
        }
    }
}
}

这可能不是树的最直观的数据结构，但我最终得到了这个，因为我需要显示节点和边缘的标签。

JSON对象用作Tree组件的输入，其中包含以下模板：

＆＃13;

<template id="tree-template">
    <div class="tree clearfix">
        <node v-ref:node :node-data="treeData"></node>
    </div>
</template>

＆＃13;

Node组件如下所示：

＆＃13;

<template id="node-template">
    <div class="node">
        <div class="node__children" v-if="hasChildren">
            <div class="node__child" v-for="edge in nodeData.edges">
                <node :node-data="edge.node"></node>
            </div>
        </div>
    </div>
</template>

＆＃13;

现在的问题是，子node组件没有反映从上面对JSON对象的edges属性所做的更改。出于可视化目的，使用生成器模式逐步构造对象。即，我首先从这样的事情开始：

{
"label": "outlook",
"edges": {
    "== sunny": {
        "label": "== sunny",
        "node": {}
    }
}
}

边node的{{1}}属性是空对象。在下一步中，创建== sunny并在树数据中设置。

我知道默认情况下不会监视对象属性的更改，但在使用Vue.js时仍应触发视图更新。 node方法：

$set()

但是，此更改仅反映在顶层（即this.$set('treeData.edges["== sunny"].node', node);组件中），我可以通过输出tree来查看。此外，在{{ treeData | json }}中嵌入的node组件中，tree反映了此更改。（在操纵{ nodeData | json }}之后我也尝试了this.$set('treeData', treeData)，但没有成功。）

但是如果我在treeData组件内的{{ edge.node }}指令中输出v-for，它在初始化期间仍然是空对象集（因此不会呈现后续节点）。

我还试图在node和tree组件中为此定义一个自己的观察者，但无济于事：

＆＃13;

node

＆＃13;

我知道如何让（递归）// ... watch: { 'nodeData': { handler: function(val, oldVal) { console.log('nodeData updated:'); console.log(val); }, deep: true } }组件了解node / treeData的更改？

使用Vue.js中的递归组件对JSON对象中的属性更改做出反应

0 个答案: