在本地导入.json文件以在vue js中创建树映射

{
  "name": "Root",
  "children": [
    {
      "name": "Node 1",
      "children": [
        {
          "name": "Node 1.1",
          "children": []
        },
        {
          "name": "Node 1.2",
          "children": []
        }
      ]
    },
    {
      "name": "Node 2",
      "children": []
    }
  ]
}

import treeData from './data.json';

data() {
  return {
    tree: treeData
  };
}

<template>
  <div>
    <tree-node :node="tree"></tree-node>
  </div>
</template>

<template>
  <div>
    <span>{{ node.name }}</span>
    <ul v-if="node.children.length > 0">
      <li v-for="child in node.children" :key="child.name">
        <tree-node :node="child"></tree-node>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: ['node']
};
</script>