提要:项目中之前都是一层checkbox选择,书写比较简单。这次项目中遇到了多层。虽说逻辑不复杂,但是书写中也遇到问题,并且对watch有新的理解。本文不啰嗦css和布局内容。主要描述双向绑定和数据的获取。
第一步:看静态页面最终效果图和HTML结构布局。
图一说明:点击灰色背景区域的父级地址名称,紧邻的下方白色背景的子集订单被选中。点击全选按钮所有checkbox都选中。
图2.3说明:图2是双层v-for循环。每个子集的input绑定了相同的v-model值。并且绑定了value值。图三绑定了v-modell并且绑定了事件change.
第二步:数据data声明和重构。
因为我们的子集v-model值是动态生成的,所以我们再请求到列表数据todolist以后需要对dataModel进行结构重组。可以把每个子集列表绑定的value值对应放入dataModel中。
重组代码如下:
var len =this.todolist.length;for (var i = 0; i < len; i ++) {var item1 ={value1: []};
this.dataModel.push(item1);
}
第三步,监听dataModel中双向绑定的数据变化,通过变化去控制父级是否选中,全选是否选中,选中的