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

【问题标题】：Importing a .json file local to create a treemap within vue js在本地导入 .json 文件以在 vue js 中创建树形图
【发布时间】：2020-09-29 07:50:07
【问题描述】：

我正在尝试将 .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>

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

【问题讨论】：

你能检查一下你是否可以在你的mounted()钩子中使用console.log(warehouses)吗？
Web 浏览器不允许使用 c、php 等文件。您可以编写从服务器获取 json 响应的 ajax 请求，进一步您需要解析它并放入您的数据属性。之后你可以在你v-for中使用它。

标签： html json vue.js import

【解决方案1】：

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

【讨论】：