简单实现uniapp单选框radio取消选择

最新推荐文章于 2024-08-23 11:16:55 发布

不稳定选手

最新推荐文章于 2024-08-23 11:16:55 发布

阅读量2.2k

点赞数 1

文章标签： uni-app

本文链接：https://blog.csdn.net/qq_54857463/article/details/132524757

版权

文章描述了在使用uniapp的radio组件时遇到的问题，即点击已选中的radio无法取消选中。通过提供代码示例和解决方案，展示了如何给radio绑定点击事件并动态更新`radioSelect`变量以控制选中状态。

摘要由CSDN通过智能技术生成

1.问题

在使用uniapp中radio组件时发现一个问题，点击一个已经选中的radio，不会将其取消选中，

查阅文档后发现官网有写这个注意事项

2.解决方法

<template>
	<view>
		<radio-group>
			<label>
				<radio @click="radioClick(1)" :checked="radioSelect==1?true:false" :value="1" /><text>1</text>
			</label>
			<label>
				<radio @click="radioClick(2)" :checked="radioSelect==2?true:false" :value="2" /><text>2</text>
			</label>
		</radio-group>
	</view>
</template>

<script>
    export default {
		data() {
			return {
				radioSelect:0
			}
		},
		methods: {
			radioClick(e){
				if(e==this.radioSelect){
					this.radioSelect=0
				}else{
					this.radioSelect=e
				}
			}
		}
	}
</script>

给radio绑定一个点击事件，然后通过改变radioSelect值，改变radio是否选中