如何在嵌套数组（数组中的数组）上使用 v-for 指令进行迭代

Question

我是 Vue 的新手，遇到了一个情况，我想就一些建议提供一些建议。

在我的 js 文件中，我有一些数组，其中包含一些我想在表中插入的数据：

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"}]

然后我将这两个数组保存在另一个名为 availableData 的变量中

const availableData=[d1,d2];

我的vue实例如下：

new Vue({
  el: '#c1',
  data: {
    availableData,
  }
});

在我的 HTML 中，我试图在我的行 div 中添加一个 for 循环（v-for），以便该行可以显示我的 availableData 变量中的每个数据，但是我在尝试将 d1 传递到第一行时遇到了一些问题和 d2 到第二个，

<div id="c1" class="columns">

// ...some code

    <div class="row" v-for="data in availableData">
        <div class="cell">
            {{data.col1}}
        </div>
        <div class="cell">
            {{data.col2}}
        </div>
        <div class="cell">
            {{data.col3}}
        </div>
        <div class="cell">
            {{data.col4}}
        </div>
        <div class="cell">
            {{data.col5}}
        </div>
    </div>
</div>

当然，v-for 语句是不正确的，因为我试图遍历 availableData 数组，如果我要写的话

v-for="data in availableData[i]"

那么有没有办法通过像 i 这样的变量来实现迭代，或者这种方法不是一种可行的方式来进行？

Answer 1

您有多种解决方案来做您想做的事。

解决方案 #1：

您可以更改 availableData 以显示您想要的所有数据。你只需要像这样平放你的数组：const availableData=[...d1, ...d2];

使用这样的代码，您的 availableData 变量将具有：

const availableData = [{col1:"aaa1",col2:"bbb1",col3:"ccc1",col4:"ddd1",col5:"eee1"},
          {col1:"aaa2",col2:"bbb2",col3:"ccc2",col4:"ddd2",col5:"eee2"},
          {col1:"fff1",col2:"ggg1",col3:"hhh1",col4:"iii1",col5:"jjj1"},
          {col1:"aaa2",col2:"bbb2",col3:"ccc2",col4:"ddd2",col5:"eee2"}]

解决方案 #2

您可以在模板中进行两次迭代：

<div class="data" v-for="data in availableData">
    <div class="row" v-for="row in data">
        <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>