Vue使用Axios调用API获取数据后表格显示空白问题求助

问题原因 #

1. Axios 请求返回的response是完整的响应封装对象，实际后端返回的业务数据存放在response.data属性中，你直接将整个response赋值给vendors数组，导致vendors不是你需要的商家列表数组，遍历渲染自然没有内容。
2. 结合你给出的API返回结构，业务数据中的商家列表存放在body字段下，所以你需要取到response.data.body赋值给vendors才对。
3. 额外注意你给出的API返回示例最开头多了一个字符3，如果实际接口返回确实带有这个非法字符，会导致JSON解析失败，需要后端修正接口返回格式。

修正后的代码 #

<script>
var app = new Vue({
  el: '#app',
  data: {
    vendors: []
  },
  mounted: function(){
   axios.get('https://myapi.com/API/api/read_all_api.php')
      .then(response => {
        // 取实际的商家列表赋值
        this.vendors = response.data.body;
        console.log(response.data.body);
      })
      .catch(error => {
        console.log(error);
      });
  }
})
</script>

额外优化建议 #

可以给v-for加上key属性，符合Vue规范避免运行警告，修改HTML中的遍历代码即可：

<tr v-for="vendor in vendors" :key="vendor.id">

内容的提问来源于stack exchange，提问作者winfred adrah