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 || []
};
相关推荐
FlyWIHTSKY14 小时前
vue2和vue3有什么区别,用法上有哪些区别
前端·javascript·vue.js
ruanno_top19 小时前
能点,但 Tab 不到:两个组件把「可操作」做了一半
vue.js
爱吃烧烤的技术渣19 小时前
别再手写 CRUD 了:我把 Element Plus 的工作量压缩成一份列 schema
前端·vue.js
徐小夕1 天前
万字长文!DeepSeek Super-agent × 企业知识库架构深度拆解与落地实践
前端·vue.js·github
ruanno_top2 天前
倒计时该用 deadline 还是每秒减一?我把两种写法都跑了一遍
vue.js
徐小夕2 天前
下载量超 30 万的开源智能体 Prime Agent:它把自己从 TypeScript 重写成了 Rust
前端·vue.js·github
toooooop82 天前
CRMEB 故障排查笔记:安全网关只放行 GET/POST 怎么办
前端·javascript·vue.js·thinkphp6·crmeb
软件技术NINI2 天前
基于SpringBoot和Vue的项目评审系统
javascript·vue.js·spring boot·后端·spring·毕业设计·毕设
FRing032 天前
vue2干货总结3(computed计算属性、watch监听器)
开发语言·前端·vue.js·vue2
Java小卷2 天前
JuanForm vs FormCreate!Vue3 表单引擎联动配置 PK!
vue.js·低代码