简述自己遇到的问题,觉得合适就拿去用
我在使用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>