Question

我有很少的多维数组数组。

我的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}}一样打印原始数据，它将打印所有数据。那我怎么遍历接收对象呢？

Answer 1

@Chris G已经在评论中发布了答案。但是，由于隐藏了一点，因此答案如下：

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

请注意，访问单个属性时，我已删除了多个收据。

如何在Vue.js中遍历嵌套数组

1 个答案: