如何循环遍历vuejs中的嵌套数组答案

【问题标题】：How to loop through nested array in vuejs如何循环遍历vuejs中的嵌套数组
【发布时间】：2018-12-31 00:57:19
【问题描述】：

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

我的 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}}，它会打印所有数据。那么我怎样才能遍历reciepts 对象呢？

【问题讨论】：

您的问题示例中的数据结构有点混乱。 receipts 是数组的键值还是只是一个包含具有 receipts 键的对象的数组？您可以将响应数据发布为 JSON 吗？
我正面临内循环问题。我想显示收据数组的所有数据。不通过 bill_no
jsfiddle.net/khrismuc/48hjacmk
@ChrisG 它什么都不打印
我猜你需要v-for="reciepts in report.reciepts"

标签： javascript arrays multidimensional-array vue.js

【解决方案1】：

@Chris G 已经在 cmets 中发布了答案。但是，由于它隐藏了一点，这里是答案：

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

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

【讨论】：