使用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.mzph.cn/diannao/17544.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python2.7安装M2Crypto

对于Python 2.7安装M2Crypto&#xff0c;你可以按照以下步骤进行&#xff1a; 环境准备 操作系统&#xff1a;根据你的操作系统&#xff08;如macOS、Windows等&#xff09;&#xff0c;你需要确保你的Python 2.7环境已经正确设置。 依赖库&#xff1a; SWIG&#xff1a;M2Cry…

pg_lakehouse 与 datafusion

原理分析 pg_lakehouse 是 ParadeDB 推出的一个开源插件&#xff0c;支持对多种数据湖里的数据做分析计算。它的出现&#xff0c;使得 Postgres 能够像访问本地数据一样轻松访问 S3 等对象存储&#xff0c;轻松访问 Delta Lake 上的表格&#xff0c;具备数据湖分析能力。 pg_…

微信小程序实现容器图片流式布局功能,配合小程序原生框架使用。

小程序实现容器图片流式布局功能&#xff0c;因为目前论坛上也有很多博主出过类似的文章&#xff0c;这里我就以一个小白角度去讲一下如何实现的吧。给作者一点点鼓励&#xff0c;先点个赞赞吧&#x1f44d;&#xff0c;蟹蟹&#xff01;&#xff01; 目标 实现下方效果图 技术…

sonar3 使用 api/measures/componet 获取代码当,Java实现

最近团队在做一个技术架构相关的优化&#xff0c;当前的目标是想要通过代码量&#xff0c;系统架构入手。先统计到部门的代码量&#xff0c;如何进行代码行数的统计呢&#xff0c;因为我们采用的是Java技术栈&#xff0c;我就Java技术栈进行说明。 1、如何统计代码行数 要统计…

ZYNQ AXI4 FDMA内存读写

1 概述 如果用过ZYNQ的都知道,要直接操作PS的DDR 通常是DMA 或者VDMA,然而用过XILINX 的DMA IP 和 VDMA IP,总有一种遗憾,那就是不够灵活,还需要对寄存器配置,真是麻烦。对于我们搞 FPGA 的人来说,最喜欢直接了当,直接用FPGA代码搞定。现在XILINX 的总线接口是AXI4总线…

C-数据结构-树转存广义表-广义表转成树-实例

树转存广义表 save.c #include<stdio.h> #include<stdlib.h>#define FNAME "/tmp/out"struct node_st {char data;struct node_st *l,*r; };static struct node_st *tree NULL;//把tree提升到全局变量,当前文件int insert(struct node_st **root,int d…

latex中复制到word里面之后如何转变成word自带的公式

详细步骤如下&#xff1a; 第一步&#xff0c;将latex中的公式复制到word里面&#xff0c;例如&#xff1a;$r_1^d$ 第二步&#xff0c;选中$$里面的部分&#xff0c;也就是去掉$$&#xff0c;选中剩余的部分&#xff0c;例如&#xff1a;r_1^d 第三步&#xff0c;word工具栏里…

Web前端三大主流框架深度解析:React、Angular与Vue的较量

在现代Web开发中&#xff0c;前端框架已经成为开发人员的标准工具。它们不仅提供了丰富的功能&#xff0c;极大地简化了复杂的应用开发过程&#xff0c;还能提高开发效率和代码的可维护性。目前&#xff0c;React、Vue和Angular被认为是Web前端开发的三大主流框架。本文将深入探…

【Javascript修炼篇】你一天会犯几次低级错误

最近&#xff0c;尝试出一个javascript修炼篇&#xff0c;让编程技术更上一层楼。如果你对Javascript有兴趣&#xff0c;或者想要提供自己的编程技术&#xff0c;那么这个系列就很适合你。欢迎关注&#xff0c;持续更新中… 新手&#xff1a;作为人类&#xff0c;犯错实在太常…

echarts地图下钻+地图遮盖物散点

一、下载工具 npm i echarts echarts-gl axios -S -S是生产依赖默认是-S不写也可以 -D是开发依赖 二、引入工具 import * as echarts from "echarts"; import "echarts-gl"; import axios from "axios"; 三、HTML部分代码 <div class&…

【代码随想录】【算法训练营】【第21天】 [530]二叉搜索树的最小绝对差 [501]二叉搜索树的众数 [236]二叉树的最近公共祖先

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 LeetCode。 day 21&#xff0c;天气不错的周二~ 题目详情 [530] 二叉搜索树的最小绝对差 题目描述 530 二叉搜索树的最小绝对差 解题思路 前提&#xff1a;二叉搜索树 思路&#xff1a;根据二叉搜索树的中…

长安链使用Golang编写智能合约教程(二)

本篇说的是长安链2.3.的版本的智能合约&#xff0c;虽然不知道两者有什么区别&#xff0c;但是编译器区分。 教程三会写一些&#xff0c;其他比较常用SDK方法的解释和使用方法 编写前的注意事项&#xff1a; 1、运行一条带有Doker_GoVM的链 2、建议直接用官方的在线IDE去写合…

公钥,私钥,数字签名,证书

公钥和私钥是一对&#xff0c;公钥是公开的&#xff0c;比如服务器持有公钥&#xff0c;对数据进行加密&#xff0c;接收端只有有对应的私钥才能对数据进行解密&#xff0c;私钥是不公开私自的。 数字签名跟上面是反过来的过程&#xff0c;客户端发送给服务器之前&#xff0c;…

奥枫软件Java要个16K遇到地狱级难度,醉了。。。

我只能说地狱难度&#xff0c;没绝对把握就别去了。我凭借前辈的经验&#xff0c;和当时天时地利人和&#xff0c;六道题答得很不错&#xff0c;但还是没通过。我有备而来都没过&#xff0c;现场写那些应该都是白忙活了。 一面 1&#xff0c;分割一个整数。如123&#xff0c;结…

Blender 学习笔记(一)快捷键记录

Blender 的快捷键映射非常强大&#xff0c;如果学会将会快速提高工作效率&#xff0c;本文抄自 Blender 4.1 Manual&#xff0c;基于 Blender 4.1&#xff0c;因为自己使用 Windows&#xff0c;所以只记录 Windows 相关快捷键。 全局快捷键 键位作用ctrl0打开文件ctrls保存文…

前端RN是什么:深入解析React Native的前端革命

前端RN是什么&#xff1a;深入解析React Native的前端革命 在前端技术的飞速发展中&#xff0c;一个新的名词逐渐崭露头角——前端RN。对于许多初学者和开发者来说&#xff0c;这个术语可能充满了神秘与困惑。那么&#xff0c;前端RN究竟是什么呢&#xff1f;本文将从四个方面…

Llama3大模型原理代码精讲与部署微调评估实战

课程链接&#xff1a;Llama3大模型原理代码精讲与部署微调评估实战_在线视频教程-CSDN程序员研修院 本课程首先讲述了有关Transformer和大语言模型(LLM)的关键前置知识, 包括注意力机制、多头注意力、编码器-解码器结构等Transformer原理, 以及LLM的文本生成和LLM微调技术原理…

抖音本地生活服务商入驻指南分享!

当前&#xff0c;各大平台的团购外卖业务持续火爆&#xff0c;并逐渐成为众多创业赛道中的大热门。其中&#xff0c;本地生活服务更是在短时间内杀出重围&#xff0c;成为创业者们的首选。 根据抖音生活服务近日发布的《2023年度数据报告》&#xff0c;2023年&#xff0c;抖音生…

2024年湖北水平能力测试能搞定吗?

武汉中级职称报名正式高一段落&#xff0c;意味着今年武汉市中级职称报名除开东湖高新区之外&#xff0c;其余地方都已经正式截止了&#xff0c;那么接下来大家都在准备6月中下旬的水平能力测试考试。 水平能力测试分为两种&#xff1a;面试答辩或者笔试机考试卷&#xff0c;面…

vue脚手架与创建vue项目

一、前言 vue脚手架的安装与创建vue项目需要先行安装配置node与npm&#xff0c;详情可以看node、npm的下载、安装、配置_node 下载安装-CSDN博客 二、vue脚手架的使用 1、vue与vue脚手架的版本 Vue脚手架&#xff08;Vue CLI&#xff09;是Vue.js官方提供的一个命令行工具&…