Why I cannot see json data in table?-CodePudding

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>

CodePudding user response：

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;
    },
  }
});