element plus el-checkbox 无法选中问题

用element plus 的el-checkbox-group 和 el-checkbox开发表单的多选,今天发现赋值后没法选中,代码如下:

仅截取部分相关代码

复制代码
<template>
    <el-form
      :model="form"
    >
        <el-form-item label="质量体系认证:" prop="qualitySystem">
            <el-checkbox-group v-model="form.qualitySystem">
               <el-checkbox label="GMP" value="GMP" />
                <el-checkbox label="GSP" value="GSP" />
                <el-checkbox label="ISO9000" value="ISO9000" />
             </el-checkbox-group>
         </el-form-item>
    </el-form>
</template>

<script setup>
const props = defineProps({
  initData: {
    type: Object,
  }
})

watchEffect(() => {
  const {
    qualitySystem,
  } = props.initData; 

  form.value = {
    qualitySystem: qualitySystem
  };
});
</script> 

你会发现,点击checbox没办法选中。

经排查,发现可能是qualitySystem 是undefined,导致无法选中。

解决方法如下:

复制代码
form.value = {
    qualitySystem: qualitySystem || []
};
相关推荐
【赫兹威客】浩哥22 分钟前
【赫兹威客】框架模板-前端bat脚本部署教程
前端·vue.js
一 乐1 小时前
学生宿舍管理|基于springboot + vue学生宿舍管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·助农电商系统
yanyu-yaya2 小时前
速学兼复习之vue3章节4
前端·vue.js·前端框架
Mr-Wanter2 小时前
vue 数据反显时数字/字母不换行导致的样式问题
前端·javascript·vue.js
qq_12498707532 小时前
基于Java的心理测试系统的设计与实现(源码+论文+部署+安装)
java·开发语言·vue.js·spring boot·计算机毕设·计算机毕业设计
daols882 小时前
vue表格 vxe-table 如何实现键盘导航时,按回车健向右移动,并到最后一行时按回车自动新增一行
vue.js·vxe-table
我叫Double4 小时前
GeneralAdmin-3
前端·javascript·vue.js
走粥5 小时前
选项式API与组合式API的区别
开发语言·前端·javascript·vue.js·前端框架
幻云20106 小时前
Next.js 之道:从入门到精通
前端·javascript·vue.js·人工智能·python
多仔ヾ6 小时前
Vue.js 前端开发实战之 05-Vue 过渡和动画
vue.js