时间戳

首页 > 解决方案 > 如何循环遍历vuejs中的嵌套数组

javascript - 如何循环遍历vuejs中的嵌套数组

问题描述

我有几个多维数组的数组。

我的 api 响应

0:  name : "name",
    address : "address"

        0:
            reciepts : 
                ballance : 10,
                bill : 101, 
        1:  
            reciepts : 
                ballance : 12,
                bill : 101, 

1:  name : "name",
    address : "address"

        0:
            reciepts : 
                ballance : 13,
                bill : 101, 
        1:
            reciepts : 
                ballance : 14,
                bill : 101, 
2:  name : "name",
    address : "address"

        0:
            reciepts : 
                ballance : 15,
                bill : 101, 
        1:
            reciepts : 
                ballance : 16,
                bill : 101,

我将此数据绑定到一个数组。

this.reportResults=response.data;

在代码中，我正在遍历这个数组，例如

<ul>
            <li v-for="report in reportResults"> // this woks fine
                <div class="row " style="background-color: #f4fbee;">
                    <div class="col-md-2">{{report.bill_no}}</div>
                </div>
           </li>
</ul>

但在这里我想循环浏览收据。所以我只是写了

<ul>
                <li v-for="report in reportResults"> // this woks fine
                    <div class="row " style="background-color: #f4fbee;">
                        <div class="col-md-2">{{report.bill_no}}</div>
                    </div>
                   <div class="row" v-for="reciepts in report"> // this print nothing
                       {{reciepts.bill}}
                    </div>
               </li>
    </ul>

内循环不打印任何内容。但是，如果我在第二个循环中打印原始数据，例如 {{reciepts}}，它会打印所有数据。那么我怎样才能遍历收据对象呢？

标签： javascriptarraysmultidimensional-arrayvue.js

解决方案

@Chris G 已经在评论中发布了答案。但是，由于它有点隐藏，所以这是答案：

<div class="row" v-for="reciept in report.reciepts">{{reciept.bill}}</div>

请注意，在访问单个属性时，我已经删除了 reciept 的复数形式。

推荐阅读