Why I cannot see json data in table? - html

Question

I am trying to display json data in tree hierachy table with vue.js. Unfortunally I cannot see any data inside of the table. The path is correct, I have checked this by URL adress, the format as well. My goal is to create tree hierarchy table, with action button for removing layers. I would like to mention thath I am new in Vue.js framework, so this is not maybe the best option how to work with fetched data from json file.
HTML:
<table>
<thead>
<tr>
<th>Name</th>
<th>Parent</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.parent }}</td>
<td>
<button #click="toggleChildren(item)">Toggle Children</button>
</td>
<template v-if="item.childrenVisible">
<tr v-for="child in item.children" :key="child.id">
<td>{{ child.name }}</td>
<td>{{ child.parent }}</td>
<td>
<button #click="toggleChildren(child)">Toggle Children</button>
</td>
</tr>
</template>
</tr>
</tbody>
</table>
</div>
Vue.js code
<script>
fetch('data/vue-data.json')
.then(response => response.json())
.then(data => {
new Vue({
el: '#app',
data: {
items: data.items
},
methods: {
toggleChildren(item) {
item.childrenVisible = !item.childrenVisible;
},
}
});
})
</script>

Answer 1

you create your app in advance. also where is your #app container?
<div id="app">
<!-- your table data -->
</div>
and for the js
new Vue({
el: '#app',
// data should return an object, not be an object
data() {
return {
items: [] // default value, could also be null
}
},
// called on initialization, read about lifecycle hooks
mounted() {
fetch('data/vue-data.json').then(response => { this.items = response.json() })
},
methods: {
toggleChildren(item) {
item.childrenVisible = !item.childrenVisible;
},
}
});