如何在 vue.js 应用程序中访问 JSON 对象我是新手
import json from './json/data.json'
JSON 文件已加载,现在我必须访问其中的对象
最佳答案
只需将导入分配给数据属性
<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>
注意
如果您要导入的对象是静态的,即不会更改,那么将其分配给数据属性将毫无意义,因为它不需要 react 。
Vue 将 data
选项中的所有属性转换为 getters/setters 以使属性具有反应性。因此,vue 为不会更改的数据设置 getter/setter 是不必要的和开销。参见 Reactivity in depth .
因此您可以创建一个自定义选项,如下所示:
<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>
关于javascript - 如何在 vue.js 应用程序中访问外部 json 文件对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45565349/