Vue 3 -树-更改为JSON文本不反映在树

Question

新手问题，刚刚进入Vue 3，使用https://github.com/wopehq/vue3-tree但我认为我的问题更多地涉及基本的反应性，我在onNodeClick方法中添加了下面两行:

const onNodeClick = (node) => {
console.log(node);
node.label = "Label got changed!!!";
console.log("Label got changed???");
};

标签在树中没有改变-我尝试过使用Vue.set(…)，但这在Vue 3中不可用，所以我用什么?

https://4b465s.csb.app/

谢谢!

Answer 1

检查源代码总是好的。

原来在库中有一个可用的函数updateNode()。

你只需要做一个ref到Tree.vue组件(Vue模板Refs)，像这样:

<Tree ref="tree"

并在setup()

中声明

const tree = ref(null);
... 
return {
nodes,
tree,

那么你可以简单地使用updateNode()函数，像这样:

//node.label = "Label got changed!!!";      
tree.value.updateNode(node.id, { label:  "Label got changed!!!" });

检查您更新的游乐场

库更新函数似乎有一个小故障。树中的第一个节点没有使用updateNode()函数更新。

检查ve3 -tree/src/lib/utils/文件夹和ve3 -tree/src/lib/components/Tree.vue来自己澄清问题，或者写一个GitHub Issue，如果你想让开发人员解决这个问题。

Answer 2

onNodeClick的'node'参数获取节点作为值。因此，如果您更改label，那么您将在节点的本地值副本中更改它。

要更改树中的label，您必须编写一些函数来遍历数据树，找到节点并直接更改label。

像这样:

let data = [{
id: 1,
label: "Animal",
nodes: [
{
id: 2,
label: "Dog",
},
{
id: 3,
label: "Cat",
nodes: [
{
id: 4,
label: "Egyptian Mau Cat",
},
{
id: 5,
label: "Japanese Bobtail Cat",
},
],
},
],
},
{
id: 6,
label: "People",
}
]
function changeLabel(nodeId, newLabel) {
var nodes = [];
for(let i=0; i < data.length; i++) {
nodes.unshift(data[i]);
}
let found = false;
while(!found || nodes.length == 0) {
var node = nodes.shift();
if (node.id == nodeId) {
found = true;
node.label = newLabel;      
}
if (node.nodes != undefined && node.nodes.length > 0) {
node.nodes.forEach((item) => {nodes.unshift(item)});
}
}  
}
changeLabel(5, "!!!New Label!!!");
console.log(data);