Vue.js v-for裡面再包一個v-for
html的部分
<div class="list-block" id="official_choise">
<div class="content-block-title">官方分类</div>
<!-- <ul>
<li>
<div class="dom-C empty_content">已无官方分类可供选择</div>
</li>
</ul> -->
<ul>
<li class="accordion-item" v-for="todo in mydata">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">{{ todo.sort_name }}</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<div class="list-block">
<ul>
<li v-for="li in todo.class">
<label class="label-checkbox item-content">
<!-- Checked by default -->
<input type="checkbox" name="my-checkbox" value="Books">
<div class="item-media">
<i class="icon icon-form-checkbox"></i>
</div>
<div class="item-inner">
<div class="item-title">{{li.class_name}}</div>
</div>
</label>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
js的部分
var official_choise = new Vue({
el: '#official_choise',
data: {mydata:data.class},
})
我的data長這個樣子
{
"sys_code": "200",
"sys_mdg": "取得成功",
"class": [
{
"sortId": "1",
"sort_name": "神像",
"create_datetime": "2017-07-15 00:00:00",
"update_datetime": "2017-07-15 00:00:00",
"sequence": "1",
"status": "0",
"class": [
{
"classId": "1",
"channel": "official",
"key": null,
"class_name": "上界神",
"sortId": "1",
"create_datetime": "2017-07-15 00:00:00",
"update_datetime": "2017-07-15 00:00:00",
"sequence": "1",
"status": "0"
},
{
"classId": "2",
"channel": "official",
"key": null,
"class_name": "中界神",
"sortId": "1",
"create_datetime": "2017-07-15 00:00:00",
"update_datetime": "2017-07-15 00:00:00",
"sequence": "2",
"status": "0"
},
{
"classId": "3",
"channel": "official",
"key": null,
"class_name": "下界神",
"sortId": "1",
"create_datetime": "2017-07-15 00:00:00",
"update_datetime": "2017-07-15 00:00:00",
"sequence": "3",
"status": "0"
}
]
},
{
"sortId": "2",
"sort_name": "饰品",
"create_datetime": "2017-07-15 00:00:00",
"update_datetime": "2017-07-15 00:00:00",
"sequence": "2",
"status": "0",
"class": [
{
"classId": "4",
"channel": "official",
"key": null,
"class_name": "手环",
"sortId": "2",
"create_datetime": "2017-07-15 00:00:00",
"update_datetime": "2017-07-15 00:00:00",
"sequence": "1",
"status": "0"
},
{
"classId": "5",
"channel": "official",
"key": null,
"class_name": "项链",
"sortId": "2",
"create_datetime": "2017-07-15 00:00:00",
"update_datetime": "2017-07-15 00:00:00",
"sequence": "2",
"status": "0"
},
{
"classId": "6",
"channel": "official",
"key": null,
"class_name": "平安符",
"sortId": "2",
"create_datetime": "2017-07-15 00:00:00",
"update_datetime": "2017-07-15 00:00:00",
"sequence": "3",
"status": "0"
}
]
},
{
"sortId": "3",
"sort_name": "佛具",
"create_datetime": "2017-07-15 00:00:00",
"update_datetime": "2017-07-15 00:00:00",
"sequence": "3",
"status": "0",
"class": [
{
"classId": "7",
"channel": "official",
"key": null,
"class_name": "神桌",
"sortId": "3",
"create_datetime": "2017-07-15 00:00:00",
"update_datetime": "2017-07-15 00:00:00",
"sequence": "1",
"status": "0"
},
{
"classId": "9",
"channel": "official",
"key": null,
"class_name": "神明灯",
"sortId": "3",
"create_datetime": "2017-07-15 00:00:00",
"update_datetime": "2017-07-15 00:00:00",
"sequence": "3",
"status": "0"
}
]
},
{
"sortId": "4",
"sort_name": "立香",
"create_datetime": "2017-07-15 00:00:00",
"update_datetime": "2017-07-15 00:00:00",
"sequence": "4",
"status": "0",
"class": [
{
"classId": "10",
"channel": "official",
"key": null,
"class_name": "中药料",
"sortId": "4",
"create_datetime": "2017-07-15 00:00:00",
"update_datetime": "2017-07-15 00:00:00",
"sequence": "1",
"status": "0"
},
{
"classId": "11",
"channel": "official",
"key": null,
"class_name": "檀香",
"sortId": "4",
"create_datetime": "2017-07-15 00:00:00",
"update_datetime": "2017-07-15 00:00:00",
"sequence": "2",
"status": "0"
},
{
"classId": "12",
"channel": "official",
"key": null,
"class_name": "沉香",
"sortId": "4",
"create_datetime": "2017-07-15 00:00:00",
"update_datetime": "2017-07-15 00:00:00",
"sequence": "3",
"status": "0"
}
]
}
]
}
留言
張貼留言