vuejs 的嵌套列表绑定

在项目中碰到了在v-for列表内还有一层列表的情况

json结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
{"orders":
[{"id":"1",
"state":"0",
"time":"2016-03-17",
"goods":[{"id":"1","name":"物品1","img":"xxx.jpg"},
{"id":"1","name":"物品1","img":"xxx.jpg"}]},
{"id":"2",
"state":"1",
"time":"2016-03-17",
"goods":[{"id":"1","name":"物品1","img":"xxx.jpg"},
{"id":"1","name":"物品1","img":"xxx.jpg"}]}
]}

可以看到需要在列表内嵌另一个列表。绑定代码为
1
2
3
4
new Vue({
el: "#allorder",
data: order
})

html代码为
1
2
3
4
5
6
7
8
9
<ul id="allorder" v-for="orders in orders">
<div class="order-state">{{orders.state}}</div>
订单号:<span>{{orders.id}}</span>
下单日期:<span>{{orders.ordertime}}</span>
<div class="lineimg" v-for="good in orders.goods">
<div class="item"><img v-bind:src="good.img_src"></div>
</div>
</div>
</ul>