el-checkbox如何同时获得value值和label的值
在使用el-checkbox时有时候需要往后台传送value值(定义的code)和label值,el-checkbox组件默认获取的都是label属性中的值,如果label中设置的是code,那如何获取el-checkbox的显示文字(label)呢?我们可以将value与label拼接在一起赋值给checkbox的label属性,然后获取的时候进行处理。以el-checkbox-group为..
·
在使用el-checkbox时有时候需要往后台传送value值(定义的code)和label值,el-checkbox组件默认获取的都是label属性中的值,如果label中设置的是code,那如何获取el-checkbox的显示文字(label)呢?
我们可以将value与label拼接在一起赋值给checkbox的label属性,然后获取的时候进行处理。
以el-checkbox-group为例:
<template>
<el-checkbox-group v-model="checkList" @change="selectBox">
<el-checkbox label="1:复选框A">复选框A</el-checkbox>
<el-checkbox label="2:复选框B">复选框B</el-checkbox>
<el-checkbox label="3:复选框C">复选框C</el-checkbox>
</el-checkbox-group>
</template>
<script>
export default {
data () {
return {
checkList: [],
values: [], // 存储value的数组
labels: [] // 存储label的数组
};
},
methods:{
selectBox(val){
console.log("val",val);
// 首先要初始化这两个数组,因为当取消checkbox的时候,数组中就不能有当前取消的值。
this.values = [];
this.labels= [];
val.forEach(item=>{
const value = item.split(':')[0];
const label= item.split(':')[1];
this.values.push(value);
this.labels.push(label);
});
console.log("this.values",this.values);
console.log("this.labels",this.labels);
}
}
};
</script>
打印操作结果如下gif:
完美获取了el-checkbox中的value和label值,这里只是提供一种思路,肯定还有其他方法,小伙伴们慢慢研究。
在这里提一点:
在控制台打印的数组里面带有一个名称:Observer(观察者);这里想表达的意思是在vue中当前的数据对象为响应式的,因为使用了v-model对当前的checkList进行了双向数据绑定,所以checkList为响应式的;而values和labels在data中进行了初始化,所以也是响应式的。建议大家去 vue的官方文档 详细阅读一下。
。
更多推荐
已为社区贡献1条内容
所有评论(0)