I have an array containing several multi-dimensional arrays.
This is my API response:
0: name : "name",
address : "address"
0:
receipts :
balance : 10,
bill : 101,
1:
receipts :
balance : 12,
bill : 101,
1: name : "name",
address : "address"
0:
receipts :
balance : 13,
bill : 101,
1:
receipts :
balance : 14,
bill : 101,
2: name : "name",
address : "address"
0:
receipts :
balance : 15,
bill : 101,
1:
receipts :
balance : 16,
bill : 101,
I am binding this data to an array.
this.reportResults=response.data;
In the code, I am looping through this array like this:
<ul>
<li v-for="report in reportResults"> // this works fine
<div class="row" style="background-color: #f4fbee;">
<div class="col-md-2">{{report.bill_no}}</div>
</div>
</li>
</ul>
However, I want to loop through the receipts as well. So, I wrote the following:
<ul>
<li v-for="report in reportResults"> // this works fine
<div class="row" style="background-color: #f4fbee;">
<div class="col-md-2">{{report.bill_no}}</div>
</div>
<div class="row" v-for="receipts in report.receipts"> // this prints nothing
{{receipts.bill}}
</div>
</li>
</ul>
The inner loop prints nothing. However, if I print the raw data inside my second loop like {{receipts}}, it displays all the data. So, how can I loop through the receipts object?