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 || []
};
相关推荐
大鱼前端8 小时前
Vue 3.5 :新特性全解析与开发实践指南
vue.js
_龙衣9 小时前
将 swagger 接口导入 apifox 查看及调试
前端·javascript·css·vue.js·css3
夏之小星星10 小时前
el-tree结合checkbox实现数据回显
前端·javascript·vue.js
琉璃℡初雪12 小时前
vue2/3 中使用 @vue-office/docx 在网页中预览(docx、excel、pdf)文件
vue.js·pdf·excel
拖孩14 小时前
【Nova UI】十五、打造组件库之滚动条组件(上):滚动条组件的起步与进阶
前端·javascript·css·vue.js·ui组件库
苹果电脑的鑫鑫14 小时前
element中表格文字剧中可以使用的属性
javascript·vue.js·elementui
Hejjon14 小时前
Vue2 elementUI 二次封装命令式表单弹框组件
前端·vue.js
Wannaer15 小时前
从 Vue3 回望 Vue2:响应式的内核革命
前端·javascript·vue.js
赵大仁15 小时前
React vs Vue:点击外部事件处理的对比与实现
javascript·vue.js·react.js
coderYYY17 小时前
多个el-form-item两列布局排齐且el-select/el-input组件宽度撑满
前端·javascript·vue.js·elementui·前端框架