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 || []
};
相关推荐
gis开发之家3 小时前
《Vue3 从入门到大神29篇》单元测试与 E2E 测试 —— 保障 Vue3 项目的质量
前端·javascript·vue.js·单元测试·前端框架·vue3
forever_world3 小时前
# 💧 从前端视角,彻底搞懂 AI 流式输出 —— 从"接根水管"到 Vue 3 实战
前端·vue.js
QQ_21696290964 小时前
【项目编号:project05966】SpringBoot/Vue 电影推荐系统:用户端推荐、电影资讯与后台数据管理全流程
vue.js·spring boot·后端
阿黎梨梨4 小时前
AI 推理太慢用户要退钱?前端流式输出(Stream)究竟是何方神圣?
前端·vue.js
只一4 小时前
从0到1吃透AI流式输出:Vue3+DeepSeek实战,解锁丝滑对话体验
前端·vue.js
Cobyte4 小时前
24.Vue Vapor 组件事件 emit 的实现
前端·javascript·vue.js
用户2930750976695 小时前
# 从零开始,打造 AI 产品的第一个关键体验——流式输出
前端·vue.js
饮茶三千5 小时前
基于 WangEditor 的富文本编辑器定制实践
前端·vue.js·设计模式
zhedream5 小时前
那个从没改过的页面,为什么突然坏了?
前端·vue.js
程序员黎剑5 小时前
我把算卦变成了一段if-else
java·vue.js·spring boot·后端·ai编程