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 || []
};
相关推荐
customer082 小时前
【开源免费】基于SpringBoot+Vue.JS体育馆管理系统(JAVA毕业设计)
java·vue.js·spring boot·后端·开源
轻口味4 小时前
Vue.js `Suspense` 和异步组件加载
前端·javascript·vue.js
北极象6 小时前
vue3中el-input无法获得焦点的问题
前端·javascript·vue.js
GISer_Jing7 小时前
AIGC时代的Vue或React前端开发
vue.js·react.js·aigc
customer087 小时前
【开源免费】基于SpringBoot+Vue.JS景区民宿预约系统(JAVA毕业设计)
java·vue.js·spring boot·后端·开源
霸王蟹9 小时前
文本复制兼容方案最佳实现落地。
前端·javascript·vue.js·笔记·学习
ProgramHan9 小时前
VUE组件如何开发
vue.js
○陈11 小时前
vue面试题|[2025-2-1]
前端·javascript·vue.js
来一碗刘肉面12 小时前
Vue- 组件通信2
前端·javascript·vue.js
林涧泣12 小时前
【Uniapp-Vue3】解决uni-popup弹窗在安全区显示透明问题
前端·vue.js·uni-app