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 || []
};
相关推荐
小二·17 小时前
Pinia 完全指南:用 TypeScript 构建可维护、可测试、可持久化的 Vue 3 状态管理
javascript·vue.js·typescript
bug总结17 小时前
Vue3 实现后台管理系统跳转大屏自动登录功能
前端·javascript·vue.js
小二·20 小时前
Vue 3 组件通信全方案详解:Props/Emit、provide/inject、事件总线替代与组合式函数封装
前端·javascript·vue.js
Rysxt_21 小时前
Vue.js 中 LocalStorage 与 SessionStorage 深度实践指南
vue.js·localstorage·sessionstorage
小猪猪屁1 天前
权限封装不是写个指令那么简单:一次真实项目的反思
前端·javascript·vue.js
我的写法有点潮1 天前
如何取消Vue Watch监听
前端·javascript·vue.js
童心虫鸣1 天前
如何在Vue中传递函数作为Prop
前端·vue.js
xkxnq1 天前
第一阶段:Vue 基础入门(第 6 天)
前端·javascript·vue.js
神仙刘1 天前
解决Vue router history 静态资源访问404,请求链接被加上了path的前一部分
前端·javascript·vue.js
G_GreenHand1 天前
vue自定义日历
前端·javascript·vue.js