Json Array对象访问

Question

我想要一些帮助来获取数据形式的json数组文件在链接中

  Html
  <div>
    <div v-for="data in myJson.id " >{{ data }}</div>
  </div>
      js
    import json from '.././json/data.json'
      export default {
    components: {
      MainLayout,
    },
  data: function(){
        return {
          myJson:json
        }
      },
  method:{
    getjson:function(){
      this.json = JSON.parse(myJson);
    }
  }
  }

我只想访问具有某些特定ID的数据，而无法使用我正在使用的语法访问它

编辑 Json文件

Answer 1

显然，您甚至不需要JSON.parse 。 没有它似乎可以正常工作...将JSON文件与组件放在同一目录中，然后尝试以下操作：

import data from './data.json'

export default {
  created () {
    for (const item of data[0]['file']) {
      console.log(`
        Name: ${item.name}
        Type: ${item.type}
        Size: ${item.filesize}
        Dimensions: ${item.dimension[0].width}x${item.dimension[0].height}
      `)
    }
  }
}

页面加载后，您应该在控制台中看到来自JSON文件的信息。

Answer 2

    <script>
  import MainLayout from '../layouts/Main.vue'
  import json from '.././json/data.json'

  export default {
    components: {
      MainLayout,
    },
  data: function(){
    return {
     myJson: json[0].file
    }
  },
  method:{

    }
  }
</script>   

 html
  <div v-for="data in myJson">
    {{ data.name }}
    {{ data.filesize}}
    {{ data.dimension[0].width}}x{{data.dimension[0].height}}
  </div>

使用上面的代码，我根据自己的需要利用并习惯于实现，并且有效