我尝试用vue.js在树形层次结构表中显示json数据。不幸的是，我看不到表中的任何数据。路径是正确的，我已经通过URL地址和格式进行了检查。我的目标是创建树形层次结构表，并带有用于删除层的操作按钮。我想提一下，我是Vue.js框架的新手，因此，这可能不是处理从JSON文件中获取的数据的最佳选择。

超文本标记语言：

<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代码

<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>