After going through this tutorial, I decided to create my own tree view using recursive components in Vue.js. The structure of the input array is as follows:
let tree = {
label: 'root',
nodes: [
{
label: 'item1',
nodes: [
{
label: 'item1.1'
},
{
label: 'item1.2',
nodes: [
{
label: 'item1.2.1'
}
]
}
]
},
{
label: 'item2'
}
]
}
<template>
<div>
...
<tree-menu
v-for="node in nodes"
:nodes="node.nodes"
:label="node.label" />
...
</div>
<template
<script>
export default {
props: [ 'label', 'nodes' ],
name: 'tree-menu'
}
</script>
Essentially, a label and an array of nodes are passed down to child nodes. Now, my goal is to make updates or deletions to a node (e.g. item1.1) and have these changes reflected in the main array (in this case tree) so that I can send this updated structure to the server. How can I achieve this? When I modify the label of a node, it updates in the DOM but does not update the tree array.