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

【问题标题】：How to access external json file objects in vue.js app如何在 vue.js 应用程序中访问外部 json 文件对象
【发布时间】：2018-01-15 20:21:28
【问题描述】：

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

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

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

【问题讨论】：

是否要将数据从 JSON 显示为 HTML 模板
是的，我想以 html 格式显示
你在使用 ES6 吗？如果是“从'./json/data.json'导入json”将起作用
使用 v-for 指令
不，我没有使用 es6，但我已经通过 json 导入，现在我必须显示 json 数据

标签： javascript vue.js vuejs2

【解决方案1】：

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

<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 是不必要的和开销。见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>

【讨论】：

@HaroonAslam 那么你想要它怎么样？
@HaroonAslam 显示你的 json 数据，这样帮助你会更容易
jsoneditoronline.org/?id=4b5f37eec8bce13bcb21bd86ad7fe8d5@Vamsi
关于 $options 方法的详细信息，我一直在使用 created() 处理非反应性数据 - 这更好
什么是根目录？

【解决方案2】：

如果您的文件如下所示：

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

你可以这样做：

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

【讨论】：

多数组形式
它显示数据，但以字符串形式无法使用索引值访问，但我可以使用索引在控制台中访问它们
@HaroonAslam 您应该用您尝试使用 json 对象的方式来更新您的问题。

【解决方案3】：

Typescript 项目（我在 SFC vue 组件中有 typescript），需要将resolveJsonModule 编译器选项设置为true。

在 tsconfig.json 中：

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

编码愉快:)

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

【讨论】：

【解决方案4】：

我最近开始使用 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对象的数据。

我希望这个答案对某人有所帮助。如果有任何问题，我可以提供帮助。

【讨论】：