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

我是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中，我试图在row 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>

---

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

你有几种解决方案可以实现你想要的

解决方案#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>


{{row.col1}}
{{row.col2}}
{{row.col3}}
{{row.col4}}
{{row.col5}}
尝试[…d1，…d2]获取可用数据；您的availableData现在包含两个对象数组，而不是四个对象。解决方案2，{{row.col1}，{{row.col2}}，{row.col2}}……在它们各自的div中没有显示Hi，感谢您的建议，我完全不使用索引就可以完成第二个解决方案，我编写的外部div和第二层，然后我就可以制作{{row.col1}，{{row.col1}}。。。显示，是否确认或提供有关添加索引不起作用的信息？谢谢你说得对！我会纠正的。你不需要使用索引！干得好
<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>