Vue 2.6.14通过axios调用API接口时v-for无法渲染数据问题

你推测的v-for执行时机早于请求完成的猜测不成立，Vue 2的响应式机制会在items数据更新后自动触发视图重新渲染，问题出在以下可修复的点：

问题原因与修复方案 #

• 初始值类型错误：你将items初始值设为null，v-for无法遍历null类型数据，初始化阶段不会生成列表节点，部分场景下还会影响后续更新触发。
  修正方案：将data中items的初始值改为空数组

  data: {
      items: [], // 替换原有null值
  }
  

• 缺少错误捕获与结构校验：当前axios请求没有异常捕获逻辑，可能存在接口请求失败、返回结构不符合预期的情况，导致items始终没有被正确赋值。
  修正方案：补充错误捕获和调试打印，确认返回数据结构

  fetchData: function() {
    axios
      .get('/api/activities.json')
      .then(response => {
          // 打印完整返回内容，确认你需要的数组层级是否正确
          console.log('接口完整返回：', response)
          // 注意部分接口返回的数组直接在response.data下，不需要多取一层.data
          this.items = response.data.data
          console.log('赋值后的items数组：', this.items)
      })
      .catch(err => {
          console.error('活动接口请求失败：', err)
      })
  }
  

• 模板缺少v-for必填的key属性：Vue 2要求v-for必须绑定唯一key值，否则可能出现渲染异常。
  修正方案：给列表项加key绑定

  <div id="app">
      <ul class="example">
          <!-- 若item有唯一id字段优先用id当key，测试场景可临时用index替代 -->
          <li v-for="(item, index) in items" :key="index">
              {{ item }}
          </li>
      </ul>
  </div>
  

修改后打开浏览器开发者工具控制台，确认接口请求成功、items被赋值为有效数组后即可正常渲染列表。

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