vuejs 的嵌套列表绑定

Posted on In

在项目中碰到了在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>