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

Question

我是 Vue 的新手，遇到一个情况，我想请教一些建议。

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

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>

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

How to make iterations using v-for directive on nested array (array in array)

vue.js

vue-component

v-for