[英]How to access external json file objects in vue.js app
如何在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>
笔记
如果您要导入的对象是静态的,即不会更改,那么将其分配给数据属性将毫无意义,因为它不需要是响应式的。
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>
如果您的文件如下所示:
[
{
"firstname": "toto",
"lastname": "titi"
},
{
"firstname": "toto2",
"lastname": "titi2"
},
]
你可以做:
import json from './json/data.json';
// ....
json.forEach(x => { console.log(x.firstname, x.lastname); });
打字稿项目(我在 SFC vue 组件中有打字稿),需要将resolveJsonModule
编译器选项设置为true
。
在 tsconfig.json 中:
{
"compilerOptions": {
...
"resolveJsonModule": true,
...
},
...
}
快乐编码:)
(来源https://www.typescriptlang.org/docs/handbook/compiler-options.html )
我最近开始使用 Vue JS,JSON Schema 做一个项目。 我正在尝试从 Vue 应用程序中的 JSON 模式文件访问嵌套的 JSON 对象。 我尝试了下面的代码,现在我可以在不同的 Vue 模板标签中加载不同的 JSON 对象。 在脚本标签中添加以下代码
import {JsonObject1name, JsonObject2name} from 'your Json file path';
现在您可以在导出默认部分的数据部分访问 JsonObject1,2 名称,如下所示:
data: () => ({
schema: JsonObject1name,
schema1: JsonObject2name,
model: {}
}),
现在您可以根据需要在 Vue 模板中加载 schema、schema1 数据。 例如,请参见下面的代码:
<SchemaForm id="unique name representing your Json object1" class="form" v-model="model" :schema="schema" :components="components">
</SchemaForm>
<SchemaForm id="unique name representing your Json object2" class="form" v-model="model" :schema="schema1" :components="components">
</SchemaForm>
SchemaForm 是 @formSchema/native 库的局部变量名。 我已经通过不同 CSS 选项卡中的表单实现了不同 JSON 对象的数据。
我希望这个答案对某人有所帮助。 如果有任何问题,我可以提供帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.