element-ui的checkbox-group的问题

说一个今天在工作中遇到的问题,element-ui中复选框组在重新赋值后无法勾选。

先简单说一下checkbox-group的用法。element 中checkbox-group元素能把多个 checkbox 管理为一组,只需要在 Group 中使用v-model绑定Array类型的变量即可。el-checkboxlabel属性与数组中的元素值相对应,如果存在指定的值则为选中状态,否则为不选中。

下面说一下我遇到的问题:

页面中有一组复选框,v-model绑定数据form.checkListform.checkList初始为空数组,然后通过ajax请求数据,将请求到的数据赋给form

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
<el-checkbox-group v-model="form.checkList">
<el-checkbox label="r">读取</el-checkbox>
<el-checkbox label="w">写入</el-checkbox>
<el-checkbox label="d">删除</el-checkbox>
</el-checkbox-group>
</template>

<script>
export default {
data() {
return {
form: {
checkList: []
}
}
},
methods() {
getData() {
this.axios.post('/data')
.then((res) => {
if(res.status === 1){
//res.data == {checkList: ['r','w']}
this.form = res.data
}
})
}
}
};
</script>

这时候就会发现,复选框不能操作了,既不能勾选也不能取消。

先把赋值前和赋值的checkList打出来看一下:

截图

可以看出来,赋值之后的数组没有Observer这个属性,这时候checkbox组件是无法监听data对象数据变化的。

解决办法:

可以通过watch计算属性来改变data值:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
export default {
data() {
return {
form: {},
form_1: {}
}
},
watch: {
form_1: function (val) {
this.form = val
}
},
methods() {
getData() {
this.axios.post('/data')
.then((res) => {
if(res.status === 1){
//res.data == {checkList: ['r','w']}
this.form_1 = res.data
}
})
}
}
};
</script>

此外,如果不是依赖ajax的话,可用mountedwatch来改变data