Vue.js中无法用v-for渲染Axios GET请求返回的列表数据

这种情况我碰到过好几次，大概率是这几个环节出问题，按顺序排查就能解决：

1. 确认Vue数据的响应式初始化 #

Vue的响应式系统要求数据提前在data中声明，否则后续新增的属性无法触发视图更新。你必须确保Vue实例的data里初始化了databaseList为空数组：

new Vue({
  el: '#app',
  data: {
    databaseList: [] // 必须初始化为数组，不能是undefined或null
  },
  // 其他逻辑
})

如果一开始没声明，直接用this.databaseList = res.data赋值，哪怕控制台能看到数据，Vue也监听不到这个属性的变化，页面自然不会更新。

2. 检查Axios的赋值逻辑 #

控制台能打印数据说明请求成功，但得确认你拿到的是正确的数组结构：

• 先在then回调里打印res.data，看后端返回的是纯数组，还是嵌套在对象里（比如{code:200, data: [...]}）
• 如果是嵌套结构，必须取到数组部分再赋值：

axios.get('你的PHP接口地址')
  .then(res => {
    console.log(res.data) // 先确认结构
    // 假设数组在res.data.data里，就这么赋值
    this.databaseList = res.data.data
    // 如果是纯数组，直接this.databaseList = res.data
  })
  .catch(err => console.error(err))

注意：必须用this.databaseList赋值，别用let/var重新定义变量，不然会脱离Vue的响应式系统。

3. 核对模板的v-for语法 #

模板里的v-for必须正确遍历数组，且建议绑定唯一key（避免渲染异常）：

<div id="app">
  <!-- 正确写法：遍历databaseList数组，绑定index或唯一字段作为key -->
  <div v-for="(item, index) in databaseList" :key="index">
    {{ item.你的字段名 }} <!-- 替换成你实际的字段，比如item.name -->
  </div>
</div>

要注意变量名大小写敏感，别把databaseList写成databaselist，也别误写为遍历对象的语法（比如v-for="(value, key) in databaseList"）。

4. 验证后端返回的JSON合法性 #

有时候PHP接口会输出多余内容（比如BOM头、调试echo、空格），导致返回的不是标准JSON。你可以在浏览器Network面板查看接口的Response，确认是纯数组格式：

[{"id":1,"name":"测试数据1"},{"id":2,"name":"测试数据2"}]

PHP接口要确保输出纯净的JSON：

// 清空所有多余输出
ob_clean();
// 设置正确的响应头
header('Content-Type: application/json; charset=utf-8');
// 输出JSON，中文要加JSON_UNESCAPED_UNICODE避免转码
echo json_encode($你的数据数组, JSON_UNESCAPED_UNICODE);
exit; // 终止后续代码，防止额外输出

5. 确认请求发起的时机 #

如果Axios请求写在Vue实例外面，this不会指向Vue实例，赋值自然无效。要把请求放在mounted钩子或Vue的方法里：

new Vue({
  el: '#app',
  data: {
    databaseList: []
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      axios.get('xxx.php')
        .then(res => {
          this.databaseList = res.data
        })
    }
  }
})

按这个顺序排查，基本就能解决问题——我之前碰到过一次，就是后端返回的JSON嵌套了一层data字段，直接赋值整个响应导致v-for遍历对象，页面没内容。

内容的提问来源于stack exchange，提问作者Noizy Z