Javascript 如何在Vue&；中循环通过API端点JSON对象；Axios？

我有一个API端点，它是一个JSON对象。我使用Axios和Vuejs将数据提取到DOM中，但我只能获取整个对象。当我尝试使用

v-for

指令循环时，它不会输出对象中的特定项

我使用Axios获取数据，如下所示：

export default {
  name: 'Reviews',
  props: {
    title: String
  },
  data(){
    return {
      info: []
    }
  },
  // Life cycle hook that calls axios
  mounted(){
    axios.get('http://dev.muvtravel.com/index.php/explore/test?tripid=6590').then(response => {
      console.log(response.data)
      this.info = response.data
    })
  }
}

然后尝试使用

v-for

<div v-for="(item, index) in info" :key="index">
   {{ item.establishment_address }}
   {{ item.phone }}
</div>

{{item.building_address}
{{item.phone}

{{title}}
第1栏
第2栏
{{item.building_address}
{{item.phone}
从“axios”导入axios；
导出默认值{
名称：'评论'，
道具：{
标题：字符串
},
数据（）{
返回{
信息：[]
}
},
//调用axios的生命周期钩子
安装的（）{
axios.get（）http://dev.muvtravel.com/index.php/explore/test?tripid=6590）。然后（响应=>{
console.log（response.data）
this.info=response.data
})
}
}

---

任何帮助都将不胜感激

，因此我检查了代码中的API端点是否已公开打开-确实如此

从您的有效负载来看，您的代码无法工作的原因是您试图在对象上进行迭代。您返回的

数据

对象是来自该API端点的完整负载，它是一个对象

{“success”：true，“data”：[…]”}

为了更清楚地说明我所说的内容，下面是一个示例

fetch

，您可以运行：

fetch(yourAPIEndpoint).then(res => res.json()).then(data => console.log(data));

当我运行它时，它会将此打印到控制台：

{success: true, data: Array(15)}

当我编辑上面的console.log以输出

data.data

时，如下所示：

fetch(yourAPIEndpoint).then(res => res.json()).then(data => console.log(data.data));

我得到了您试图设置的位置数组

TL；DR：您需要设置

this.info=response.data.data

---

愉快的编码！

AFAICT这看起来应该能用。当你

console.log（response.data）时，你得到数组了吗

？您的代码应该可以工作。下面是一个使用静态数据和不同布局的示例，它正在工作。由于CORS的原因，IDLE将不允许。但是您可以添加控制台日志以与您的结果进行比较。您能提供来自

{item}

的结果示例吗？我想知道它是否被解析为文本\_(ツ)_/“你能试试

{{Object.keys（item）.join（'|'）}

而不是

{item}

看看你要找的密钥是否在那里（机构地址，电话）？@Daniel好的，我知道了！我必须添加response.data.data而不是response.data。谢谢你的帮助！

fetch(yourAPIEndpoint).then(res => res.json()).then(data => console.log(data.data));