Question

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

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

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

Answer 1

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

即可

<script>
      import json from './json/data.json'
      export default{
          data(){
              return{
                  myJson: json
              }
          }
      }
</script>

然后使用myJson

遍历模板中的v-for属性

<template>
    <div>
        <div v-for="data in myJson">{{data}}</div>
    </div>
</template>

注意

如果要导入的对象是静态的，即没有改变，那么将其分配给数据属性是没有意义的，因为它不需要被动反应。

Vue将data选项中的所有属性转换为getters / setter，以使属性具有反应性。因此，为不会改变的数据设置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>

Answer 2

如果您的文件如下所示：

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

你可以这样做：

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

Answer 3

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

在tsconfig.json中：

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

快乐编码：）

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

Answer 4

我最近开始使用Vue JS，JSON Schema进行项目。我正在尝试从Vue应用程序中的JSON模式文件访问嵌套的JSON对象。我尝试了以下代码，现在可以在不同的Vue模板标签内加载不同的JSON对象。在脚本标签中添加以下代码

launch(Dispatchers.IO){
val r1=api1()
val r2=api2(r1)
val r3=api3(r2)
}

现在，您可以在导出默认部分的数据部分中访问JsonObject1,2名称，如下所示：

import  {JsonObject1name, JsonObject2name} from 'your Json file path';

现在，您可以根据需要在Vue模板中加载schema，schema1数据。例如，请参见下面的代码：

data: () => ({ 
  
  schema: JsonObject1name,
  schema1: JsonObject2name,   
  
  model: {} 
}),

SchemaForm是@ formSchema / native库的局部变量名称。我已经通过不同CSS标签中的表单实现了不同JSON对象的数据。

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

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

4 个答案: