当前位置: 首页 > news >正文

使用uniapp内置组件checkbox-group所遇到的问题

checkbox-group属性说明

属性名类型默认值说明
@changeEventHandle

<checkbox-group> 中选项发生改变触发change事件

detail = { value:[选中的checkbox的value的数组] }

问题代码

<checkbox-group @change="handleEVent()"><view style="margin-bottom: 20rpx;"><label style="display: flex;align-items: center;width: fit-content;"><checkbox value='cxm4s' /><text>车信盟出险+4S维保({{orDerPrice1.busAmount==null?0:orDerPrice1.busAmount}})</text></label></view><view style="margin-bottom: 20rpx;"><label style="display: flex;align-items: center;width: fit-content;"><checkbox value='ydgls' /><text>云端公里数查询({{ydglsPrice.price}})</text></label></view><view style="margin-bottom: 20rpx;"><label style="display: flex;align-items: center;width: fit-content;"><checkbox value='clztcx' /><text>车辆状态查询({{clztPrice.price}})</text></label></view>
</checkbox-group><script setup>const handleEVent = (e) => {console.log(e)}</script>

问题描述

运行以上代码之后,点击每一项的时候,控制台输出的都是undefined,并没有实现上述表格所说的拿到value的值。

问题解决

在@change对应定义的方法中手动传入一个 $event 即可拿到所需要的value的值

实现代码

<checkbox-group @change="handleEVent($event)"><view style="margin-bottom: 20rpx;"><label style="display: flex;align-items: center;width: fit-content;"><checkbox value='cxm4s' /><text>车信盟出险+4S维保({{orDerPrice1.busAmount==null?0:orDerPrice1.busAmount}})</text></label></view><view style="margin-bottom: 20rpx;"><label style="display: flex;align-items: center;width: fit-content;"><checkbox value='ydgls' /><text>云端公里数查询({{ydglsPrice.price}})</text></label></view><view style="margin-bottom: 20rpx;"><label style="display: flex;align-items: center;width: fit-content;"><checkbox value='clztcx' /><text>车辆状态查询({{clztPrice.price}})</text></label></view>
</checkbox-group><script setup>const handleEVent = (e) => {console.log(e)}</script>

这样修改完之后拿到的 e.value.detail = [选中的所有项的value值]

http://www.lryc.cn/news/356805.html

相关文章:

  • 嵌入式学习记录5.23(超时检测、抓包分析)
  • Linux|如何在 awk 中使用流控制语句
  • OceanBase数据库诊断调优,与高可用架构——【DBA从入门到实践】第八期
  • LLVM技术在GaussDB等数据库中的应用
  • 【SQL学习进阶】从入门到高级应用(三)
  • 迷你手持小风扇哪个品牌续航强?五款强续航迷你手持小风扇推荐!
  • SpringBoot 微服务中怎么获取用户信息 token
  • npm包-fflate
  • 华为WLAN无线组网技术与解决方案
  • 闲鱼电商运营高级课程,一部手机学会闲鱼开店赚钱
  • Yann LeCun 和 Elon Musk 就 AI 监管激烈交锋
  • C++重点基础知识汇总大全
  • 【Linux】线程安全及锁的使用
  • 深入解析绘图范式:面向对象与直接操作的较量
  • 英特尔LLM技术挑战记录
  • 在 MFC 中 UNICODE 加 _T 与 L 长字符串,有什么区别?
  • synopsys EDA 2016 合集 下载
  • CentOS 7如何使用systemctl管理应用
  • 武大深度学习期末复习-常见神经网络概念
  • Leetcode3161. 物块放置查询(Go语言的红黑树 + 线段树)
  • 基于springboot实现医疗挂号管理系统项目【项目源码+论文说明】
  • ScrumMaster认证机构及CSM、PSM、RSM价值比较
  • 加氢站压缩液驱比例泵放大器
  • MyBatis系统学习篇 - MyBatis逆向工程
  • SpringCloud的Config配置中心,为什么要分Server服务端和Client客户端?
  • 「数据结构」队列
  • Python01 注释,关键字,变量,数据类型,格式化输出
  • 基于单片机智能防触电装置的研究与设计
  • 机械行业工程设计资质乙级需要哪些人员
  • vivado改变波形图窗口颜色