如何使用Vue的v-for指令遍历嵌套数组（数组中的数组）

你好呀！我看你遇到的问题是没处理好嵌套数组的结构——你的availableData是一个包含两个数组（d1和d2）的数组，每个元素本身又是存着数据对象的数组，所以只遍历外层数组的话，拿到的是整个d1/d2，而不是单个的行数据对象，这就是为什么直接访问data.col1没效果的原因。

问题分析 #

先理清楚你的数据结构：

const d1 = [{col1:"aaa1",col2:"bbb1",col3:"ccc1",col4:"ddd1",col5:"eee1"}, {col1:"aaa2",col2:"bbb2",col3:"ccc2",col4:"ddd2",col5:"eee2"}]
const d2 = [{col1:"fff1",col2:"ggg1",col3:"hhh1",col4:"iii1",col5:"jjj1"}, {col1:"aaa2",col2:"bbb2",col3:"ccc2",col4:"ddd2",col5:"eee2"}]
const availableData = [d1, d2] // 外层是数组，内部每个元素还是数组

你当前的v-for="data in availableData"拿到的data是d1或d2（都是数组），不是单个的{col1:"aaa1",...}对象，自然无法读取col1这类属性。

解决方案 #

根据你的需求，分两种情况处理：

情况1：把d1和d2里的所有对象都渲染成独立行 #

如果要把d1里的2个对象各占一行，d2里的2个对象也各占一行，只需要嵌套v-for：先遍历外层的availableData拿到每个数组（d1/d2），再遍历每个数组里的行对象：

<div id="c1" class="columns">
  <!-- 遍历外层数组，拿到每个数据组 -->
  <div v-for="(dataGroup, groupIndex) in availableData" :key="groupIndex">
    <!-- 遍历每个数据组里的行对象 -->
    <div class="row" v-for="(rowItem, itemIndex) in dataGroup" :key="`${groupIndex}-${itemIndex}`">
      <div class="cell"> {{rowItem.col1}} </div>
      <div class="cell"> {{rowItem.col2}} </div>
      <div class="cell"> {{rowItem.col3}} </div>
      <div class="cell"> {{rowItem.col4}} </div>
      <div class="cell"> {{rowItem.col5}} </div>
    </div>
  </div>
</div>

这里的key用组合的${groupIndex}-${itemIndex}是为了避免不同组里的itemIndex重复导致的key冲突。

情况2：把d1作为一行、d2作为一行（合并组内数据） #

如果你的需求真的是把整个d1渲染成一行，d2渲染成一行，那你需要先处理数据，把每个组里的对象合并成一个行数据（比如取每个对象的对应列值拼接，或者按需求聚合），再渲染。比如：

// 在Vue实例里处理数据
new Vue({
  el: '#c1',
  data: {
    availableData,
  },
  computed: {
    mergedRows() {
      return this.availableData.map(group => {
        // 这里按需求合并，比如把同列的所有值用逗号拼接
        return {
          col1: group.map(item => item.col1).join(', '),
          col2: group.map(item => item.col2).join(', '),
          col3: group.map(item => item.col3).join(', '),
          col4: group.map(item => item.col4).join(', '),
          col5: group.map(item => item.col5).join(', ')
        }
      })
    }
  }
});

然后模板里遍历处理后的mergedRows：

<div id="c1" class="columns">
  <div class="row" v-for="(row, index) in mergedRows" :key="index">
    <div class="cell"> {{row.col1}} </div>
    <div class="cell"> {{row.col2}} </div>
    <div class="cell"> {{row.col3}} </div>
    <div class="cell"> {{row.col4}} </div>
    <div class="cell"> {{row.col5}} </div>
  </div>
</div>

关于你问的v-for="data in availableData[i]" #

这种写法是不可行的，因为v-for的数据源需要是一个可迭代的响应式数据，你不能直接在in后面用availableData[i]这种动态索引（除非i是一个响应式变量，但这和你想遍历所有组的需求不符）。正确的做法还是通过嵌套循环或者预先处理数据来实现。

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