elementui checkbox初始值无效

预期效果

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