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 || []
};
相关推荐
鹏多多3 分钟前
H5开发避坑!解决Safari浏览器的video会覆盖z-index:1的绝对定位元素
前端·javascript·vue.js
一只小阿乐31 分钟前
vue3封装alert 提示组件 仿element-plus
前端·javascript·vue.js·vue3
艾小码1 小时前
还在重复造轮子?掌握这7个原则,让你的Vue组件复用性飙升!
前端·javascript·vue.js
木易 士心3 小时前
Vue 3 Props 响应式深度解析:从原理到最佳实践
前端·javascript·vue.js
海鸥两三6 小时前
uniapp 小程序引入 uview plus 框架,获得精美的UI框架
前端·vue.js·ui·小程序·uni-app
合作小小程序员小小店9 小时前
web网页开发,在线考勤管理系统,基于Idea,html,css,vue,java,springboot,mysql
java·前端·vue.js·后端·intellij-idea·springboot
防火墙在线10 小时前
前后端通信加解密(Web Crypto API )
前端·vue.js·网络协议·node.js·express
她是太阳,好耀眼i11 小时前
Nvm 实现vue版本切换
javascript·vue.js·ecmascript
han_11 小时前
前端高频面试题之Vue(初、中级篇)
前端·vue.js·面试
执携12 小时前
Vue Router (命名视图)
前端·javascript·vue.js