使用el-checkbox踩的坑

在开发的过程中，遇到了一个需求：

1 需要根据list这个数组的添加el-checkbox, 将对应绑定的值存放到select中。

 

自然而然，html结构是这样写的：

<div v-for=“index in list”>

        <el-checkbox v-model=“select[index]” @change=“selectChange(index)”></el-checkbox>

</div>

一开始我将select声明为select=[],并没有对数组进行初始化，这就意味着v-model绑定的值是undefined，这个时候，对el-checkbox进行点击操作时，select数组各项的值是不会发生改变的，但是change事件是可以触发的，所以我们可以对change事件的回调函数进行这方面的兼容：

selectChange (index) {

     If (index === undefined) {

           this.select[index] = !select[index]

     }

}

这样之后，只要对el-checkbox进行点击，都会对select数组的值进行赋值，后续只要绑定的值不是undefined，绑定的变量的值都会随着选中状态改变。当要取出选中的值的时候，只要数组的值不为true，状态都是不选中的。