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 || []
};
相关推荐
爱上大树的小猪20 分钟前
【前端基础】深入理解 JavaScript 展开运算符:数组合并与对象浅拷贝实战指南
前端·javascript·vue.js
东方芷兰1 小时前
JavaWeb 课堂笔记 —— 03 Vue
java·前端·javascript·vue.js·笔记
爱的叹息2 小时前
关于 Spring Boot + Vue 前后端开发的打包、测试、监控、预先编译和容器部署 的详细说明,涵盖从开发到生产部署的全流程
vue.js·spring boot·后端
Z编程2 小时前
vue3实现markdown工具栏的点击事件监听
前端·javascript·vue.js
sen_shan3 小时前
Vue3+Vite+TypeScript+Element Plus开发-10.多用户动态加载菜单
vue.js·typescript·vue3·element·element plus·动态菜单·多用户动态加载菜单
刘同学有点忙3 小时前
TypeScript中如何优雅处理ant-design-vue的a-select的默认空值
vue.js·typescript
一颗奇趣蛋3 小时前
前端项目vscode最优配置(vue3+ts)
前端·vue.js
艾克马斯奎普特3 小时前
Vue.js 3 渐进式实现之响应式系统——第八节:调度执行
前端·vue.js
陈奕迅本讯3 小时前
前端-Vue2组件化编程
前端·javascript·vue.js
苏州第一深情4 小时前
【vue+leaflet】自定义控件(五)
前端·javascript·vue.js