Vue.js如何处理axios返回的多维数组并使用v-for渲染列表

解决方案 #

你遇到的核心问题是接口返回的数据结构和模板渲染需要的结构不匹配：接口返回的是包含full_name、rut、total_days三个平行数组的对象，而你模板需要的是「每个元素为单条员工数据对象的数组」，只需要在拿到接口返回后做一次结构转换即可。

修改后的axios请求代码如下：

axios.post('/api/hr_employee/days/'+ this.period_data.year +'/'+ this.period_data.month +'?page='+this.currentPage+'&api_token='+App.apiToken)
  .then(response => {
    const rawData = response.data.data
    // 合并平行数组为符合渲染要求的对象数组
    this.posts = rawData.full_name.map((name, index) => ({
      full_name: name,
      rut: rawData.rut[index],
      days: rawData.total_days[index]
    }))
    this.rowsQuantity = 1000;
  })

转换完成后你现有的v-for渲染代码不需要做任何调整，就可以正常遍历渲染每行数据，input的双向绑定也会正常生效。
如果后端返回的三个数组可能出现长度不一致的情况，可以先取三个数组的最小长度作为遍历上限，避免出现取值为undefined的问题。

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