I am dealing with JSON data structured like this-
items: {
id: 1,
children: [{
id: 2,
parentId: 1,
children: [{
id: 3,
parentId: 2
}]
}]
}
level-1 children represent parent items that all possess a parent_id of 1 (the root node's id), and level-2 children are child items with a parent_id corresponding to their respective level-1 child's id.
With this data, my goal is to construct a tree-view user interface using Vuetify where each parent and child item in the tree can be edited. Refer to the UI image for visualization:
https://i.stack.imgur.com/N0W96.png
Issue Encountered-
The parent items update successfully, but there seems to be an issue with updating the child items. Particularly problematic is this sequence of steps:
- Update any child initially (works)
- Then update its parent (works)
- Attempt to update the child again (not working)
Approach to Updating-
I locate the item indexes based on their ids and update the item at that index utilizing Vue.set. While I observe the data updating within the array, it does not reflect the updates in the template.
Below is a demonstration. If you find the logic convoluted, kindly suggest an alternate approach. As of now, this is the only method I could come up with.
Vue.component('my-dialog', {
// Component structure omitted for brevity
})
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
dialog: false,
edit_item: {},
items: {"id":1,"title":"Root","children":[{"id":2,"parentId":1,"title":"Chapter 1","children":[{"id":3,"parentId":2,"title":"Sub-chapter 1.1"},{"id":4,"parentId":2,"title":"Sub-chapter 1.2"}]},{"id":5,"parentId":1,"title":"Chapter 2","children":[{"id":6,"parentId":5,"title":"Sub-chapter 2.1"},{"id":7,"parentId":5,"title":"Sub-chapter 2.2"}]}]}
}
},
methods: {
showDialog(payload) {
// Method implementation omitted for brevity
},
onUpdate(payload) {
// Update logic implementation omitted for brevity
}
}
})<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<head>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/css/materialdesignicons.min.css" rel="stylesheet">
</head>
<div id="app">
<v-app id="inspire">
// HTML template section containing components for editing
</v-app>
</div>