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 || []
};
相关推荐
前端Hardy5 小时前
干掉 Virtual DOM?尤雨溪开始"强推" Vapor Mode?
vue.js·vue-router
Mr_li6 小时前
给 Vue 开发者的 uni-app 快速指南
vue.js·uni-app
icebreaker9 小时前
Weapp-vite:原生模式之外,多一种 Vue SFC 选择
前端·vue.js·微信小程序
icebreaker9 小时前
重走 Vue 长征路 Weapp-vite:编译链路与 Wevu 运行时原理拆解
前端·vue.js·微信小程序
wuhen_n9 小时前
代码生成:从AST到render函数
前端·javascript·vue.js
wuhen_n9 小时前
AST转换:静态提升与补丁标志
前端·javascript·vue.js
destinying9 小时前
性能优化之实战指南:让你的 Vue 应⽤跑得飞起
前端·javascript·vue.js
徐小夕11 小时前
JitWord Office预览引擎:如何用Vue3+Node.js打造丝滑的PDF/Excel/PPT嵌入方案
前端·vue.js·github
SuperEugene12 小时前
后台权限与菜单渲染:基于路由和后端返回的几种实现方式
前端·javascript·vue.js