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

Posted 2023-02-23

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

【英文标题】：How to make iterations using v-for directive on nested array (array in array)

【发布时间】：2019-12-17 03:17:09

【问题描述】：

我是 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 这样的变量来实现迭代，或者这种方法不是一种可行的方式来进行？

【问题讨论】：

对 availableData 尝试 [...d1, ...d2];你的 availableData 现在包含两个对象数组而不是四个对象

【参考方案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>

【讨论】：

我在使用解决方案 2 时遇到了问题，row.col1 ，row.col2....在它们各自的 div 中没有显示

嗨，谢谢你的建议，我完全不使用索引来完成第二个解决方案，我在外面写的 div 和我写的第二层 ，然后我可以制作 row.col1 ， row.col1 ... 显示，您想确认或提供有关为什么添加索引不起作用的信息吗？谢谢！ 你是对的！我会纠正的。你不需要使用 index ！干得好！