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 || []
};
相关推荐
Hexene...7 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情7 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
华子w9089258597 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
前端小趴菜059 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
P7Dreamer10 小时前
Vue 3 + Element Plus 实现可定制的动态表格列配置组件
前端·vue.js
I'm写代码10 小时前
el-tree树形结构笔记
javascript·vue.js·笔记
斯~内克11 小时前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
sunbyte11 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
markyankee10111 小时前
Vue 计算属性和侦听器详解
vue.js
盏茶作酒2912 小时前
打造自己的组件库(一)宏函数解析
前端·vue.js