如何在 vue.js 应用程序中访问外部 json 文件对象 [英] How to access external json file objects in vue.js app
问题描述
如何访问 vue.js 应用程序中的 JSON 对象我是新手
从 './json/data.json' 导入 jsonJSON 文件已加载，现在我必须访问其中的对象
只需将导入分配给数据属性
然后使用 v-for
myJson 属性<div><div v-for="myJson 中的数据">{{data}}</div></模板>
注意
如果您要导入的对象是静态的，即不会改变，那么将其分配给数据属性将毫无意义，因为它不需要是反应性的.
Vue 将 data 选项中的所有属性转换为 getter/setter，以使属性成为响应式.因此，vue 为不会改变的数据设置 getter/setter 是不必要的和开销.请参阅深入了解反应性.
因此您可以按如下方式创建自定义选项:
然后使用 $options 遍历模板中的自定义选项:
<div><div v-for="$options.myJson 中的数据">{{data}}</div></模板>
How to access JSON objects in the vue.js app I am new in this
import json from './json/data.json'
the JSON file is loaded and now I have to access the objects within it
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 myJson property in your template using 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 data option 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.
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:
<template>
<div>
<div v-for="data in $options.myJson">{{data}}</div>
</div>
</template>
这篇关于如何在 vue.js 应用程序中访问外部 json 文件对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
