簡述自己遇到的問題,覺得合適就拿去用
我在使用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>