当前位置: 首页 > 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值]

相关文章:

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

checkbox-group属性说明 属性名类型默认值说明changeEventHandle <checkbox-group> 中选项发生改变触发change事件 detail { value&#xff1a;[选中的checkbox的value的数组] } 问题代码 <checkbox-group change"handleEVent()"><view style&qu…...

嵌入式学习记录5.23(超时检测、抓包分析)

目录 一.自带超时参数的函数 1.1 select函数 1.2 poll函数的自带超时检测参数 二、不带超时检测参数的函数 三、通过信号完成时间的设置 四、更新下载源 五、wireshark使用 5.1. 安装 5.2. wireshark 抓包 5.2.1 wireshark与对应的OSI七层模型 ​编辑5.2.2 包头分析 …...

Linux|如何在 awk 中使用流控制语句

引言 当您从 Awk 系列一开始回顾我们迄今为止介绍的所有 Awk 示例时&#xff0c;您会注意到各个示例中的所有命令都是按顺序执行的&#xff0c;即一个接一个。但在某些情况下&#xff0c;我们可能希望根据某些条件运行一些文本过滤操作&#xff0c;这就是流程控制语句的方法。 …...

OceanBase数据库诊断调优,与高可用架构——【DBA从入门到实践】第八期

在学习了《DBA从入门到实践》的前几期课程后&#xff0c;大家对OceanBase的安装部署、日常运维、数据迁移以及业务开发等方面应当已经有了全面的认识。若在实际应用中遇到任何疑问或挑战&#xff0c;欢迎您在OceanBase社区问答论坛中交流、讨论。此次&#xff0c;《DBA从入门到…...

LLVM技术在GaussDB等数据库中的应用

目录 LLVM和数据库 LLVM适用场景 LLVM对所有类型的SQL都会有收益吗&#xff1f; LLVM在OLTP中就一定没有收益吗&#xff1f; GaussDB中的LLVM 1. LLVM在华为应用于数据库的时间线 2. GaussDB LLVM实现简析 3. GaussDB LLVM支持加速的场景 支持LLVM的表达式&#xff1a…...

【SQL学习进阶】从入门到高级应用(三)

文章目录 ✨条件查询✨条件查询语法格式✨等于、不等于✨等于 ✨不等于 <> 或 ! ✨大于、大于等于、小于、小于等于✨大于 >✨大于等于 >✨小于 <✨小于等于 < ✨and✨or✨and和or的优先级问题✨between...and... &#x1f308;你好呀&#xff01;我是 山顶风…...

迷你手持小风扇哪个品牌续航强?五款强续航迷你手持小风扇推荐!

夏天就俩字儿&#xff1a;热和空调&#xff01;太阳大得让人想躲&#xff0c;一出汗&#xff0c;感觉全身毛孔都在喊“太热啦”&#xff01;这时空调简直是救命恩人啊&#xff0c;热得只想赖在屋里不出来。但出门总得面对大太阳&#xff0c;一出门就哗哗流汗。所以&#xff0c;…...

SpringBoot 微服务中怎么获取用户信息 token

SpringBoot 微服务中怎么获取用户信息 token 当我们写了一个A接口&#xff0c;这个接口需要调用B接口&#xff0c;但是B接口需要包含请求头内容&#xff0c;比如需要用户信息、用户id等内容&#xff0c;由于不在同一个线程中&#xff0c;使用ThreadLocal去获取数据是无法获取的…...

npm包-fflate

fflate 是一个快速、轻量级且纯JavaScript实现的压缩库&#xff0c;用于处理gzip、zlib和Deflate格式的数据压缩与解压缩。它专注于提供高性能的压缩算法实现&#xff0c;特别适合于浏览器环境及Node.js环境中使用&#xff0c;且不依赖任何外部库。fflate的优势在于其极小的体积…...

华为WLAN无线组网技术与解决方案

WLAN无线组网技术与解决方案 网络拓扑采用AP和AC旁挂式无线组网 配置思路&#xff1a; 1.让AP上线 1.1&#xff0c;使得AP能够获得IP地址 配置步骤&#xff1a; 1.把AC当作一个一个有管理功能的三层交换机 sys Enter system view, return user view with CtrlZ. [AC6605]vlan …...

闲鱼电商运营高级课程,一部手机学会闲鱼开店赚钱

课程下载&#xff1a;https://download.csdn.net/download/m0_66047725/89360471 更多资源下载&#xff1a;关注我。 课程内容&#xff1a; 10-9、怎么寻找优质的货源店铺.mp4 11-10、怎么去选择商品图片.mp4 12-11、商品图片的注意避免事项.mp4 13-12、怎么写标题.mp4 …...

Yann LeCun 和 Elon Musk 就 AI 监管激烈交锋

&#x1f989; AI新闻 &#x1f680; Yann LeCun 和 Elon Musk 就 AI 监管激烈交锋 摘要&#xff1a;昨天&#xff0c;Yann LeCun 和Elon Musk 在社交媒体就人工智能的安全性和监管问题展开激烈辩论。LeCun 认为目前对 AI 的担忧和监管为时过早&#xff0c;主张开放和共享。而…...

C++重点基础知识汇总大全

文章目录 一些基础知识点指针和引用 一些基础知识点 1、十进制的数字比较长的时候&#xff0c;可以加方便阅读到底是几位&#xff0c;输出的时候跟不加是一样的效果 // 十进制可以加 cout << 13890324 << endl; // 13890324 // 二进制前加0b cout << 0b111…...

【Linux】线程安全及锁的使用

文章目录 前言一、锁1.定义一个锁变量2.pthread_mutex_init3.pthread_mutex_destroy4.pthread_mutex_lock/pthread_mutex_unlock5.静态变量锁和全局变量锁的初始化 二、问题描述及锁的运用三、RAII风格的锁 前言 临界资源: 在多个线程或进程间共享的资源. 临界区: 代码中访问临…...

深入解析绘图范式:面向对象与直接操作的较量

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 第一节&#xff1a;面向对象绘图的魅力 第二节&#xff1a;直接操作绘图模块的便捷性 第三…...

英特尔LLM技术挑战记录

英特尔技术介绍&#xff1a; Flash Attention Flash Attention 是一种高效的注意力机制实现&#xff0c;旨在优化大规模 Transformer 模型中的自注意力计算。在深度学习和自然语言处理领域&#xff0c;自注意力是 Transformer 架构的核心组件&#xff0c;用于模型中不同输入元…...

在 MFC 中 UNICODE 加 _T 与 L 长字符串,有什么区别?

在MFC&#xff08;Microsoft Foundation Classes&#xff09;和更广泛的Windows编程环境中&#xff0c;UNICODE宏用于指示程序应使用Unicode字符集&#xff08;通常是UTF-16&#xff09;来处理文本。当定义了UNICODE宏时&#xff0c;编译器和库函数会期待和处理宽字符&#xff…...

synopsys EDA 2016 合集 下载

包含如下安装包&#xff0c;如需安装服务也可联系我 FineSim_vL_2016.03 Laker201612 Library Compiler M-2016.12 Update Training PrimeTime M-2016.12 Update Training StarRC M-2016.12 Update Training SynopsysInstaller_v3.3 TSMC-65nm(OA) fm_vL-2016.03-SP1 fpga_vL-…...

CentOS 7如何使用systemctl管理应用

说明&#xff1a;本文介绍如何使用systemctl命令的方式来启动、查看、停止和重启应用&#xff0c;以安装后的prometheus、alertmanager为例&#xff1b; Step1&#xff1a;创建文件 在系统/etc/systemd/system/路径下&#xff0c;创建一个xxx.service文件&#xff0c;该文件内…...

武大深度学习期末复习-常见神经网络概念

深度学习经典神经网络概念、优缺点及应用场景 文章目录 一、多层感知机&#xff08;MLP&#xff09;1.1 结构和原理1.2 优缺点1.3 应用场景 二、卷积神经网络&#xff08;CNN&#xff09;2.1 结构和原理2.2 优缺点2.3 应用场景 三、循环神经网络&#xff08;RNN&#xff09;3.1…...

Leetcode3161. 物块放置查询(Go语言的红黑树 + 线段树)

题目截图 题目分析 每次1操作将会分裂成两块区间长度&#xff0c;以最近右端点记录左侧区间的长度即可 因此涉及到单点更新和区间查询 然后左右侧最近端点则使用redBlackTree&#xff0c;也就是python中的sortedlist ac code type seg []int// 把 i 处的值改成 val func (t …...

基于springboot实现医疗挂号管理系统项目【项目源码+论文说明】

基于springboot实现医疗挂号管理系统演示 摘要 在如今社会上&#xff0c;关于信息上面的处理&#xff0c;没有任何一个企业或者个人会忽视&#xff0c;如何让信息急速传递&#xff0c;并且归档储存查询&#xff0c;采用之前的纸张记录模式已经不符合当前使用要求了。所以&…...

ScrumMaster认证机构及CSM、PSM、RSM价值比较

企业现有的经营管理模式和传统的瀑布式交付模式&#xff0c;已经不能适应快速变化的市场响应和客户需求&#xff0c;现代的敏捷工作方式在过去数年涌现&#xff0c;比如Scrum&#xff0c;XP&#xff0c;看板&#xff0c;DevOps等敏捷方法&#xff0c;近十年Scrum在国内企业中备…...

加氢站压缩液驱比例泵放大器

加氢站压缩液驱液压系统的要求是实现换向和速度控制&#xff0c;对液压动力机构而言&#xff0c;按原理可区分为开式&#xff08;阀控&#xff09;- 节流控制系统和闭式&#xff08;泵控&#xff09;- 容积控制系统&#xff1a; 阀控系统 – 节流调速系统&#xff1a;由BEUEC比…...

MyBatis系统学习篇 - MyBatis逆向工程

MyBatis的逆向工程是指根据数据库表结构自动生成对应的Java实体类、Mapper接口和XML映射文件的过程。逆向工程可以帮助开发人员快速生成与数据库表对应的代码&#xff0c;减少手动编写重复代码的工作量。 我们在MyBatis中通过逆向工具来帮我简化繁琐的搭建框架&#xff0c;减少…...

SpringCloud的Config配置中心,为什么要分Server服务端和Client客户端?

SpringCloud的Config配置中心&#xff0c;为什么要分Server服务端和Client客户端&#xff1f; 在SpringCloud的Config配置中心中分了Server服务端和Client客户端&#xff0c;为什么需要这样分呢&#xff1f;它的思想是所有微服务的配置文件都放到git远程服务器上&#xff0c;让…...

「数据结构」队列

目录 队列的基本概念 队列的实现 头文件queue.h 实现函数接口 1.初始化和销毁 2.出队列和入队列 3.获取队头元素和队尾元素 4.队列长度判空 后记 前言 欢迎大家来到小鸥的博客~ 个人主页&#xff1a;海盗猫鸥 本篇专题&#xff1a;数据结构 多谢大家的支持啦&#xff…...

Python01 注释,关键字,变量,数据类型,格式化输出

# 导入模块 import keyword# 我的第一个Python程序 这是单行注释 快捷键&#xff1a;CTRL/这里是多行注释 可以写多行&#xff0c;用 三个单引号 包起来print(Hello work) print(你好&#xff0c;中国)aa 这是不是注释了&#xff0c;是多行文本。print(aa)# 快速创建 python …...

基于单片机智能防触电装置的研究与设计

摘 要 &#xff1a; 针对潮湿天气下配电线路附近易发生触电事故等问题 &#xff0c; 对单片机的控制算法进行了研究 &#xff0c; 设 计 了 一 种 基 于 单片机的野外智能防触电装置。 首先建立了该装置的整体结构框架 &#xff0c; 再分别进行硬件设计和软件流程分析 &#xf…...

机械行业工程设计资质乙级需要哪些人员

申请机械行业工程设计资质乙级需要的人员主要包括以下几个方面&#xff0c;具体要求和数量根据参考文章归纳如下&#xff1a; 一、主要专业技术人员 数量要求&#xff1a;主要专业技术人员数量应不少于所申请行业资质标准中主要专业技术人员配备表规定的人数。学历和职称要求…...