vue.js - 如何在嵌套数组（数组中的数组）上使用 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 这样的变量来实现迭代，或者这种方法不是一种可行的方法？

标签： vue.jsvue-componentv-for

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>