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 || []
};
相关推荐
jingling5556 小时前
vue | 在 Vue 3 项目中集成高德地图(AMap)
前端·javascript·vue.js
油丶酸萝卜别吃6 小时前
Vue3 中如何在 setup 语法糖下,通过 Layer 弹窗组件弹出自定义 Vue 组件?
前端·vue.js·arcgis
J***Q29213 小时前
Vue数据可视化
前端·vue.js·信息可视化
JIngJaneIL14 小时前
社区互助|社区交易|基于springboot+vue的社区互助交易系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·社区互助
ttod_qzstudio15 小时前
深入理解 Vue 3 的 h 函数:构建动态 UI 的利器
前端·vue.js
1***s63215 小时前
Vue图像处理开发
javascript·vue.js·ecmascript
一 乐15 小时前
应急知识学习|基于springboot+vue的应急知识学习系统(源码+数据库+文档)
数据库·vue.js·spring boot
E***q53919 小时前
Vue增强现实开发
前端·vue.js·ar
4***149019 小时前
Vue代码规范详解
javascript·vue.js·代码规范
梦想CAD控件20 小时前
AI生成CAD图纸(云原生CAD+AI让设计像聊天一样简单)
前端·javascript·vue.js