Javascript 如何在 vue.js 应用程序中访问外部 json 文件对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45565349/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to acces external json file objects in vue.js app
提问by Haroon Aslam
How to access JSONobjects in the vue.jsapp I am new in this
如何在vue.js应用程序中访问JSON对象我是新手
import json from './json/data.json'
the JSON file is loaded and now I have to access the objects within it
JSON 文件已加载，现在我必须访问其中的对象
回答by Vamsi Krishna
Just assign the import to a data property
只需将导入分配给数据属性
<script>
import json from './json/data.json'
export default{
data(){
return{
myJson: json
}
}
}
</script>
then loop through the myJsonproperty in your template using v-for
然后使用循环遍历myJson模板中的属性v-for
<template>
<div>
<div v-for="data in myJson">{{data}}</div>
</div>
</template>
NOTE
笔记
If the object you want to import is static i.e does not change then assigning it to a data property would make no sense as it does not need to be reactive.
如果您要导入的对象是静态的，即不会更改，那么将其分配给数据属性将毫无意义，因为它不需要是反应性的。
Vue converts all the properties in the dataoption to getters/setters for the properties to be reactive. So it would be unnecessary and overhead for vue to setup getters/setters for data which is not going to change. See Reactivity in depth.
Vue 将data选项中的所有属性转换为 getter/setter 以使属性成为响应式。因此，vue 为不会改变的数据设置 getter/setter 是不必要的和开销。请参阅深入的反应性。
So you can create a custom option as follows:
因此，您可以按如下方式创建自定义选项：
<script>
import MY_JSON from './json/data.json'
export default{
//custom option named myJson
myJson: MY_JSON
}
</script>
then loop through the custom option in your template using $options:
然后使用以下命令遍历模板中的自定义选项$options：
<template>
<div>
<div v-for="data in $options.myJson">{{data}}</div>
</div>
</template>
回答by smarber
If your file looks like this:
如果您的文件如下所示：
[
{
"firstname": "toto",
"lastname": "titi"
},
{
"firstname": "toto2",
"lastname": "titi2"
},
]
You can do:
你可以做：
import json from './json/data.json';
// ....
json.forEach(x => { console.log(x.firstname, x.lastname); });
回答by Luckylooke
Typescript projects (I have typescript in SFC vue components), need to set resolveJsonModulecompiler option to true.
打字稿项目（我在 SFC vue 组件中有打字稿），需要将resolveJsonModule编译器选项设置为true.
In tsconfig.json:
在 tsconfig.json 中：
{
"compilerOptions": {
...
"resolveJsonModule": true,
...
},
...
}
Happy coding :)
快乐编码:)
(Source https://www.typescriptlang.org/docs/handbook/compiler-options.html)
（来源https://www.typescriptlang.org/docs/handbook/compiler-options.html）
