簡述自己遇到的問題,覺得合適就拿去用
我在使用v-for遍歷checked復選框數據的時候,數據分為兩部分,一個主活動,主活動下面有多個子活動
我實體類的設計是里面加個list放子活動,
頁面循環需要遍歷主活動和子活動,
那這樣內部的子活動就v-for,主活動就不能遍歷了,主活動默認選中,
之后需要全選操作,遇到的問題就是點擊全選無法選中第一個,
但是斷點查看的時候,卻發現在斷點結束前是選中的,這個就很無語
之后解決了,我就直接貼代碼了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> </head> <body> <section class="layout" id="app"> <section class="content content-login"> <label> <input type="checkbox" :value="dataList" v-model="param"> {{dataList.name}} <br/> </label> <label v-for="item in dataList.list"> <input type="checkbox" :value="item" v-model="param"/> {{item.name}} <br/> </label> <br/> <label > <input type="checkbox" v-model="selectAll" @change="allChange"> 全選</label> <br/> {{param}} </section> </section> </body> </html> <script src="vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
selectAll: false,
dataList: {
recno: 1,
name: 'd1',
list: [{
recno: 2,
name: 'd2'
}, {
recno: 3,
name: 'd3'
}, {
recno: 4,
name: 'd4'
}]
},
param:[]
},
methods: {
allChange: function() {
if(this.selectAll) {
this.param = [];
this.param.push(this.dataList);
for(var i in this.dataList.list) {
this.param.push(this.dataList.list[i]);
}
}else {
this.param = [];
}
}
}
})
</script>
