如何在 vue.js 应用程序中访问外部 json 文件对象

Question

如何在 vue.js 应用程序中访问 JSON 对象我是新手

import json from './json/data.json'

JSON文件已加载，现在我必须访问其中的对象

原文由 Haroon Aslam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需将导入分配给数据属性

<script>
      import json from './json/data.json'
      export default{
          data(){
              return{
                  myJson: json
              }
          }
      }
</script>

然后使用 v-for 循环遍历模板中的 myJson 属性

<template>
    <div>
        <div v-for="data in myJson">{{data}}</div>
    </div>
</template>

笔记

如果您要导入的对象是静态的，即不会更改，那么将其分配给数据属性将毫无意义，因为它不需要是响应式的。

Vue 将 data 选项中的所有属性转换为 getter/setter 以使属性具有反应性。因此，vue 为不会改变的数据设置 getter/setter 是不必要的和开销。请参阅 深入反应性。

因此，您可以按如下方式创建自定义选项：

 <script>
          import MY_JSON from './json/data.json'
          export default{
              //custom option named myJson
                 myJson: MY_JSON
          }
    </script>

然后使用 $options 模板中的自定义选项：

 <template>
        <div>
            <div v-for="data in $options.myJson">{{data}}</div>
        </div>
    </template>

原文由 Vamsi Krishna 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您的文件如下所示：

 [
    {
        "firstname": "toto",
        "lastname": "titi"
    },
    {
        "firstname": "toto2",
        "lastname": "titi2"
    },
]

你可以做：

 import json from './json/data.json';
// ....
json.forEach(x => { console.log(x.firstname, x.lastname); });

原文由 smarber 发布，翻译遵循 CC BY-SA 3.0 许可协议