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 file

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>

使用上面的代码，我根据自己的需要使用并实现了它的工作