导入本地的.json文件以在vue js中创建树形图

Question

我正在尝试将.json文件导入到我的vue js项目中，然后根据数据创建一个树形图。

我的.json文件如下所示

{
    "warehouses":[
        {
            "id":4,
            "name":"Goimek",
            "itemCount":354,
            "idParent":0,
            "nameParent":"",
            "locationInfo":[
            {
                "id":19,
                "name":"Puerta 4",
                "itemCount":354
            }],
            "warehouseChildrenInfo":[]
        },
        {
            "id":5,
            "name":"Karpa",
            "itemCount":167,
            "idParent":0,
            "nameParent":"",
            "locationInfo":[
            {
                "id":24,
                "name":"Karpa",
                "itemCount":167
            }],
            "warehouseChildrenInfo":[]
        },
        {
            "id":6,
            "name":"Wec",
            "itemCount":145,
            "idParent":0,
            "nameParent":"",
            "locationInfo":[
            {
                "id":25,
                "name":"WEC",
                "itemCount":115
            }],
            "warehouseChildrenInfo":[
            {
                "id":1009,
                "name":"BIGUMETRIK",
                "itemCount":30,
                "idParent":0,
                "nameParent":"",
                "locationInfo":[
                {
                    "id":1015,
                    "name":"BIGUMETRIK",
                    "itemCount":30
                }],
                "warehouseChildrenInfo":[]
            }]
        },

        {
            "id":1037,
            "name":"PROVEEDOR",
            "itemCount":10,
            "idParent":0,
            "nameParent":"",
            "locationInfo":[
            {
                "id":1553,
                "name":"PROVEEDOR Lehenetsitako kokapena",
                "itemCount":0
            },
            {
                "id":1554,
                "name":"PIKUMEK S.L",
                "itemCount":0
            },
            {
                "id":1555,
                "name":"TENKOR S.L",
                "itemCount":10
            },
            {
                "id":1556,
                "name":"ZUMELTXU S.L",
                "itemCount":0
            }],
            "warehouseChildrenInfo":[]
        }
    ]
}

这就是我如何导入

import warehouses from './warehouses.json'

export default {
  name: 'app',
  data () {
    return {
      title: 'My first tree map',
      warehouses : warehouses
    }
  }
}

然后我就尝试通过在div中进行显示来显示数据

<div v-for="(warehouse,index) in warehouses" :key ="index" >{{warehouse.id }}</div>

，但不显示任何内容。我在这里做什么错了？

Answer 1

您可以在vue中通过js文件使用JSON。这是您的JSON的沙箱demo。