数组遍历里多个radio-group的问题解决

news2024/9/19 10:41:44

对于数组的遍历的单选组合问题如下
在这里插入图片描述

			<view class="swiper-box-list">
				<view v-for="obj in firstTabsInfo" :key="obj.productId">
					<view class="secondProduct">
						<view class="menu-topic-bottom-color"></view>
						<text class="menu-topic-text">{{obj.name}}</text>
					</view>
					<radio-group @change="radioChange">
						<view v-for="item in obj.productAppParamVos" :key="item.enterpriseProduceId"
							class="thirdProduct">
							<view>
								<radio :value="item.enterpriseProduceId" :checked="item.checked"
									style="transform:scale(0.7)" :disabled="!item.deliveryProCount"
									color="rgba(64, 128, 255, 1)" />
							</view>
							<view class="thirdFont">{{item.name}}</view>
						</view>
					</radio-group>
				</view>
			</view>
			radioChange(evt) {
				console.log(evt, 'evt')
				//先将所有checked置为false
				this.firstTabsInfo.map(v => {
					if (v.productAppParamVos) {
						v.productAppParamVos.map(t => {
							t.checked = false
						})
					}
				})

				this.radioValue = evt.detail.value
					//1.将点击的值赋值给this.radioValue
					//2.在进行比较,如果遍历数组里面跟this.radioValue相同的就将当前的对象里的checked置为true
				this.firstTabsInfo.map(v => {
					if (v.productAppParamVos) {
						v.productAppParamVos.map(t => {
							if (t.enterpriseProduceId == this.radioValue) {
								t.checked = true

							}
						})
					}
				})
			},

  1. 先将所有checked置为false
  2. 将点击的值赋值给this.radioValue
  3. 在进行比较,如果遍历数组里面跟this.radioValue相同的就将当前的对象里的checked置为true

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1123292.html

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

相关文章

win11系统如何访问ie浏览器(不用额外安装IE浏览器,使用win11系统自带功能即可访问ie浏览器)

文章目录 一、背景二、win11系统访问IE浏览器步骤 一、背景 笔记本电脑win11系统中已经将IE浏览器抛弃了&#xff0c;默认安装的是Edge浏览器&#xff0c;我的电脑是华为 matebook 14s, 系统win11家庭中文版&#xff0c;已经不支持安装IE浏览器了&#xff0c;在有Edge浏览器的…

会声会影2023破解版安装包下载附带补丁注册机

提到视频剪辑软件&#xff0c;浮现在我们脑海的可能就是满屏的功能键和眼花缭乱的操作界面。类似pr、AE之类的视频软件&#xff0c;操作界面看起来十分复杂&#xff0c;很多用户上手困难。而会声会影界面简单&#xff0c;功能齐全&#xff0c;也能完成专业级的视频制作。操作简…

【C++】引用’‘的深入解析

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …

QT QGLWidge

QGLWidget 学习 前言1.四边形 QGLWidget 2*32. 正方体 1*2前言 1.四边形 QGLWidget 2*3 坐标 效果 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); //清除屏幕和深度缓存glLoadIdentity(); //重置当前的模型观察矩阵glTranslate…

ElasticSearch安装、插件介绍及Kibana的安装与使用详解

ElasticSearch安装、插件介绍及Kibana的安装与使用详解 1.安装 ElasticSearch 1.1 安装 JDK 环境 因为 ElasticSearch 是用 Java 语言编写的&#xff0c;所以必须安装 JDK 的环境&#xff0c;并且是 JDK 1.8 以上&#xff0c;具体操作步骤自行百度 安装完成查看 java 版本 …

算法基础学习|前缀和差分

前缀和 代码模板 一维前缀和模板 S[i] a[1] a[2] ... a[i] a[l] ... a[r] S[r] - S[l - 1]二维前缀和模板 S[i, j] 第i行j列格子左上部分所有元素的和 以(x1, y1)为左上角&#xff0c;(x2, y2)为右下角的子矩阵的和为&#xff1a; S[x2, y2] - S[x1 - 1, y2] - S[x2, …

如何最有效地使用ChatGPT:提问技巧与策略

前言 在如今信息技术高速发展的时代&#xff0c;像ChatGPT这样的大型自然语言处理模型为我们提供了一个强大的工具&#xff0c;以获取各种信息和答案。然而&#xff0c;要充分利用这一工具&#xff0c;您需要掌握一些提问技巧与策略&#xff0c;以确保获得最准确和有用的回答。…

人员定位在安全生产管理中的应用

人员定位技术正在成为安全生产管理中的重要工具&#xff0c;它利用各种定位技术来获取人员的位置信息&#xff0c;帮助管理人员更好地监控和保障人员安全。 关于人员定位管理 在安全管理工作中&#xff0c;人员定位技术主要用来跟踪和监测特定区域内的员工或来访者的位置&#…

CleanMyMac X免费macOS清理系统管家

近些年伴随着苹果生态的蓬勃发展&#xff0c;越来越多的用户开始尝试接触Mac电脑。然而很多人上手Mac后会发现&#xff0c;它的使用逻辑与Windows存在很多不同&#xff0c;而且随着使用时间的增加&#xff0c;一些奇奇怪怪的文件也会占据有限的磁盘空间&#xff0c;进而影响使用…

wordpress数据库迁移Invalid default value for ‘comment_date‘

问题说明 最近在往新的电脑上迁移一个wordpress网站&#xff0c;在往新电脑上的mysql数据库中导入数据时&#xff0c;报错&#xff1a;1067 - Invalid default value for comment_date。 异常分析 这个错误的字面意思就是字段‘comment_date’的默认值是无效的&#xff0c;于…

python爬虫语法

注释 单行注释 # 多行注释 ‘’’注释内容’’’ 变量类型 和java不同不需要定义数据类型 变量名变量值 Numbers&#xff08;数字&#xff09;&#xff1a;int&#xff08;有符号整型&#xff09;、long&#xff08;长整型[也可以代表八进制和16进制]&#xff09;、float&am…

用 HarmonyOS 做一个可以手势控制的电子相册应用(ArkTS)

介绍 本篇 Codelab 介绍了如何实现一个简单的电子相册应用&#xff0c;主要功能包括&#xff1a; 1. 实现首页顶部的轮播效果。 2. 实现页面多种布局方式。 3. 实现通过手势控制图片的放大、缩小、左右滑动查看细节等效果。 相关概念 ● Swiper&#xff1a;滑块视图容…

96核的AMD锐龙Threadripper PRO 7995WX性能如何?

AMD新推出的锐龙Threadripper 7000系列可以说是目前最快的工作站处理器&#xff0c;最顶级的锐龙Threadripper PRO 7995WX拥有96个Zen 4内核&#xff0c;共192线程&#xff0c;基础频率2.5GHz&#xff0c;加速频率5.15GHz&#xff0c;拥有384MB L3缓存和多达128条PCI-E 5.0通道…

深入理解 Python 中的真值和假值概念

目录 一、真值和假值的定义 二、技术原理 三、代码实现 四、注意事项 总结 在 Python 中&#xff0c;真值和假值是布尔类型&#xff08;bool&#xff09;的两个唯一可能的值。它们在程序的控制流中起着重要作用&#xff0c;用于判断条件是否满足&#xff0c;以及进行逻辑比…

Java进阶篇--Condition与等待通知机制

Condition简介 Condition是Java并发包中的一种机制&#xff0c;用于线程之间的协作和通信。它与锁&#xff08;Lock&#xff09;紧密配合使用&#xff0c;并提供了更高级别的等待/通知功能。 下面是Condition的一些特性和区别&#xff1a; 1. 精确唤醒&#xff1a;Condition…

【Spring篇】数据源对象管理加载properties文件

&#x1f38a;专栏【Spring】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【如愿】 &#x1f970;欢迎并且感谢大家指出小吉的问题 文章目录 &#x1f33a;数据源对象管理&#x1f6f8;基础版⭐在pom.xml文件中加入下面的代码&…

HVV(护网)蓝队视角的技战法分析

一、背景 1.HVV行动简介 HVV行动是国家应对网络安全问题所做的重要布局之一。从2016年开始&#xff0c;随着我国对网络安全的重视&#xff0c;演习规模不断扩大&#xff0c;越来越多的单位都加入到HVV行动中&#xff0c;网络安全对抗演练越来越贴近实际情况&#xff0c;各机构…

C++对象模型(20)-- 函数语义学:函数和变量的绑定问题

1、静态类型和动态类型 静态类型&#xff1a;对象定义时的类型&#xff0c;编译期间就确定好的。定义的时候是什么就是什么。 动态类型&#xff1a;对象目前所指向的类型&#xff0c;运行时才确定的类型。一般只有指针和引用才有动态类型。 比如下面的代码&#xff1a; cla…

SpringBoot+Vue实现AOP系统日志功能

AOP扫盲&#xff1a;Spring AOP (面向切面编程&#xff09;原理与代理模式—实例演示 logs表&#xff1a; CREATE TABLE logs (id int(11) NOT NULL AUTO_INCREMENT,operation varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT 操作名称,type varchar(255) COLL…

博途S7-1200PLC自由口通信(Send_P2P和Receive_P2P指令编程)

S7-1200PLC的MODBUS-RTU通信的实战应用和完整SCL源代码,请参看下面的文章链接 https://rxxw-control.blog.csdn.net/article/details/132845221https://rxxw-control.blog.csdn.net/article/details/132845221MODBUS-RTU协议和常用功能码解读 https://rxxw-control.blog.csd…