预期效果
image.png
实际效果 开始无数据, checkbox两个值还需要点两次才能起效
Animation.gif
现象: checkbox 使用obj 等作为 label的时候, 编辑的时候拿到的初始值 无法渲染上去
本来以为是vue没有使用$set的原因及时更新视图的原因, 后来发现不是这个问题, 原因是由于 作为复合属性(数组和对象), 他们的原型对象不是同一个, 保存的内存地址不一样, , 所以不相等,
解决方式: label 不使用复合属性值, 用单属性, label="city.areaId", fromData.areaList = [315001, 315003] 这样
代码复现:
<template>
<div>
<el-form
:model="formData"
>
<el-form-item label="测试">
<el-checkbox-group v-model="formData.areaList" >
<el-checkbox
v-for="(city, index) in cities"
:label="city"
:key="index"
:checked="city.checked"
>{{ city.areaName }}</el-checkbox
>
</el-checkbox-group>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
cities: [{"areaId":"315003","areaName":"杭州来福士"},{"areaId":"315001","areaName":"宁波-骑行"},{"areaId":"214101","areaName":"无锡工厂"},{"areaId":"315000","areaName":"正式环境宁波"}],
formData: {
areaList: [{"areaId":"315003","areaName":"杭州来福士"}, {"areaId":"315001","areaName":"宁波-骑行"}]
},
}
},
mounted() {
console.log(this.cities[0], this.formData.areaList[0])
},
methods: {
/* getDetail() {
console.log(this.cities[0], this.formData.areaList[0])
}*/
}
}
</script>
<style>
</style>
console输出的原型属性上面的值, 两个值不同
image.png
