解决el |
您所在的位置:网站首页 › vue监听checkbox › 解决el |
目录 前言: 问题分析: 解决方式: 前言:相信很多猿友都被el-checkbox选中状态更改的问题困扰的掉了不少头发!!!!!!!这玩意真的是坑啊!!今天,机缘巧合(认真研究)之下,终于解决了这个问题。 问题分析:首先这个问题部分人给的解决方式修改v-model的绑定值,而且有部分人信誓旦旦的说这个方法有效。我测了一下,确实有效,但是是在没有使用el-checkbox-group的情况下。具体代码如下: checkbox1 checkbox2 checkbox3 点击切换 export default { data () { return { checked1: true, checked2: false, checked3: true } }, methods: { dj () { let that = this if (that.checked1 === true) { that.checked1 = false } else { that.checked1 = true } if (that.checked2 === true) { that.checked2 = false } else { that.checked2 = true } if (that.checked3 === true) { that.checked3 = false } else { that.checked3 = true } } } }经过测试,在不添加el-checkbox-group的情况下,修改v-model的绑定值确实能起到改变选中状态的效果。但是一旦加上el-checkbox-group。此方法失效。 有的人说修改:checked的绑定值。经测试,:checked只在赋初始值的时候有用,修改:checked的绑定值并不能起到修改选中状态的效果。【无论有没有el-checkbox-group包含都不可以】 测试的具体代码如下,有兴趣的可以复制到VUE项目中测试一下。 代码说明:为了好记,三个复选框编号为1,2,3。在不使用el-checkbox-group包含的情况下,v-model的值决定了复选框的选中状态。而:checked的值只能决定初始选中状态。 checkbox1 checkbox2 checkbox3 点击切换v-model值{{model1}} {{model2}} {{model3}} 点击切换checked值{{check1}} {{check2}} {{check3}} export default { data () { return { group: [], model1: true, model2: false, model3: true, check1: false, check2: true, check3: false } }, methods: { dj () { let that = this if (that.model1 === true) { that.model1 = false } else { that.model1 = true } if (that.model2 === true) { that.model2 = false } else { that.model2 = true } if (that.model3 === true) { that.model3 = false } else { that.model3 = true } }, dj2 () { let that = this if (that.check1 === true) { that.check1 = false } else { that.check1 = true } if (that.check2 === true) { that.check2 = false } else { that.check2 = true } if (that.check3 === true) { that.check3 = false } else { that.check3 = true } } } } 解决方式:在含有el-checkbo-group包含的情况下,再通过操作单个复选框的v-model的绑定值已经起不到效果了。但相信使用el-checkbox-group的人都知道,如果不指定el-checkbox-group的v-model属性,则el-checkbox-group作用域内的所有el-checkbox都将不会显示。这似乎说明group的v-model值相当重要。而且这个值是一个数组,而不是一个字符串。这是不是意味着group作用域内的每一个checkbox都被动态加载到这个group的数组中了呢?于是我做了测试,发现果然如我们所想的那样,group作用域内的checkbox都被动态加载到这个数组中了,而动态加载checkbox的关键就在于给checkbox指定label属性。label属性可以自定义。如果不指定checkbox的label属性,则在数组中会显示null。如果出现多个不指定label属性的checkbox,这些未指定label属性的checkbox会被“同选同消”。 测试代码放在文末,感兴趣的同学可以复制到VUE项目中测试。 综上: 在不加el-checkbox-group的情况下,指定并修改单个el-checkbox的v-model值就可以起到改变该复选框选中状态的效果。 当el-checkbox出现在el-checkbox-group的作用域内时,则需要修改el-checkbox-group的v-model数组内容,才能起到改变复选框选中状态的效果。 PS:在group作用域中增加选中状态比较简单,只需要在group的v-model绑定的数组中追加一个需要选择的checkbox的label值就可以。如: this.checkGroup.push('2') 【但是要确该复选框label不会在数组中同一时刻出现多个】 但是在group作用域中取消选中状态相对来说比较复杂,以下提供两种方式用作参考: 1、数组遍历方式: checkGroup.forEach(function(item, index, arr) { if(item === "3") { arr.splice(index, 1); } }) 2、过滤器方式: checkGroup= checkGroup.filter(function(item) { return item != "3" })这里是checkGroup:{{checkGroup}} checkbox1 checkbox2 checkbox3 checkbox4 checkbox5 点击追加选中2号复选框 export default { data () { return { checkGroup: ['1', '3'] } }, methods: { click1 () { let that = this that.checkGroup.push('2') } } }手写不易,给个三连吧!转载请写明出处哦~! |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |