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

Question

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

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

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

Answer 1

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

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

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

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

注意

如果要导入的对象是静态的,即不更改,则将其分配给数据属性是没有意义的,因为它不需要被动.

Vue将data选项中的所有属性转换为getter/setter,以使属性具有反应性.因此,为不会改变的数据设置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>

Answer 2

打字稿项目（我在 SFC vue 组件中有打字稿），需要将resolveJsonModule编译器选项设置为true.

在 tsconfig.json 中：

{
  "compilerOptions": {
    ...
    "resolveJsonModule": true,
    ...
  },
  ...
}

快乐编码:)

（来源https://www.typescriptlang.org/docs/handbook/compiler-options.html）

Answer 3

如果您的文件如下所示:

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

你可以做:

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