vue当用户单击任何按钮时，只将该值设置为true，其他值为false

最新推荐文章于 2024-08-16 07:34:20 发布

前端Hardy

最新推荐文章于 2024-08-16 07:34:20 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_52814911/article/details/126607467

本文介绍了一个常见的卡片切换组件问题及解决方案。通过定义卡片状态对象并使用点击事件来更新状态，确保每次只展示一个相关卡片信息，避免多个卡片信息同时显示的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做卡片切换时遇到这样的问题：
场景：当点击A时显示A的相关卡片信息；点击B时显示B的相关卡片信息,以此类推…
思路：定义一个卡片状态对象（isCardState：{A：false；…}）;利用点击按钮传item值做判断，如果相等显示即可。
问题：点击A时显示A的卡片信息，但是点击B时A的卡片信息还会保留…呃呃呃呃呃呃呃
解决方法：

<template>
	<el-form-item label="数据分组" prop="dataValue">
		<el-select
		:popper-append-to-body="false"
		clearable
		v-model="ruleForm.dataValue"
		placeholder="请选择分组"
		>
		<el-option
			v-for="(item,index) in options"
			:key="Math.random()"
			:label="item"
			:value="item"
			@click.native="selectSwitch(item,index)"
			>
		</el-option>
		</el-select>
	</el-form-item>
</template>
<script>
	export default {
		data() {
			return {
				isCardState:{
					SET:false,
					STA:false,
					AI:false,
					DI:false,
					AO:false,
					DO:false,
					VER:false,
				},
			};
		},
		methods:{
		//重点
			selectSwitch(item,index){
				Object.keys(this.isCardState).forEach((key) => {
					this.isCardState[key] = key === item ? true : false;
				});
			},
		}
	}
</script>