Я пытался создать компонент вида дерева в Vue.
Это пространство имен vuex
const tree = {
state: {data: {}},
mutations: {
init: (state, data) => {
state.data = { ...data }
},
setNodeData: (state, indexes) => {
const newstatedata = JSON.parse(JSON.stringify(state.data))
let node = newstatedata
for (let i = 0; i < indexes.length; ++i) {
node = node.children[indexes[i]]
}
node.collapsed = !node.collapsed
state.data = newstatedata
},
addItem: (state, indexes) => {
const newstatedata = JSON.parse(JSON.stringify(state.data))
let node = newstatedata
for (let i = 0; i < indexes.length; ++i) {
node = node.children[indexes[i]]
}
node.children = node.children || []
node.children.push({
label: "hack"
})
state.data = newstatedata
},
},
}
Вот код https://pastebin.com/sGL5stGb
Но, когда я нажимаю на узел (чтобы свернуть или развернуть), только узел root разворачивается / разворачивается. Другие узлы не работают должным образом.
Данные загружаются через функцию init с использованием данных, передаваемых из реквизитов.
Структура данных (рекурсивно определенная):
{
label: "Node1",
collapsed: false,
children: [
{ label: "node12", children: [] },
{ label: "node13", children: [] },
]
}
Код минимальный.