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 || []
};
相关推荐
醉酒的李白、7 小时前
Vue3 组件通信本质:Props 下发,Emits 回传
前端·javascript·vue.js
小眼哥7 小时前
SpringBoot整合Vue代码生成exe运行程序以及windows安装包
vue.js·windows·spring boot
徐小夕7 小时前
PDF无限制预览!Jit-Viewer V1.5.0开源文档预览神器正式发布
前端·vue.js·github
吴声子夜歌8 小时前
Vue.js——自定义指令
前端·vue.js·flutter
小芝麻咿呀8 小时前
vue--面试题第一部分
前端·javascript·vue.js
早起傻一天~G9 小时前
vue2+element-UI表格封装
javascript·vue.js·ui
Ruihong12 小时前
Vue v-bind 转 React:VuReact 怎么处理?
vue.js·react.js·面试
前端那点事14 小时前
Vue插槽用法全解析(Vue2+Vue3适配)| 组件复用必备
vue.js
Ruihong15 小时前
Vue v-on 在 React 中 VuReact 会如何实现?
vue.js·react.js·面试
|晴 天|15 小时前
实现草稿自动保存功能:5秒无操作自动保存
前端·vue.js·typescript