如何在vue.js应用程序中访问外部json文件对象 [英] How to acces external json file objects in vue.js app

问题描述

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

How to access JSON objects in the vue.js app I am new in this

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

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>

然后循环遍历 myJson 属性模板使用 v-for

then loop through the myJson property in your template using v-for

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

注意

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

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将 data 选项中的所有属性转换为getter / setter，以使属性成为被动的。因此，为不会改变的数据设置getter / setter是不必要的和开销。请参阅深度反应性。

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>

然后使用 $ options ：

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

这篇关于如何在vue.js应用程序中访问外部json文件对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！