问题描述:

uniapp使用checkbox多选 取消选中时无法获取当前点击的value
选中时
取消选中时

这是错误代码:

<view class="intro" v-for="(item,index) in data" :key="item.index">
	<view class="introName"><text class="introLable">uniapp</text>{{item.ming}}
		<view v-show="isRadio" class="radio">
			<checkbox-group @change="radioChange">
				<checkbox :value="item.number"  class="radio" ></checkbox>
				</checkbox-group>
		</view>
	</view>
</view>
//JS代码
radioChange: function(evt) {
	console.log('点击name',evt)
	this.value=evt.target.value
		if (!evt.target.value.length == 0) {
			for (let i = 0; i < this.data.length; i++) {
				if (!(this.data[i] === evt.target.value[0])) {
					this.value.push(evt.target.value[0])
					break
				}
			}
		} else {
			取消选中时删除 
			this.value.splice(this.userData.findIndex(item => item === evt.target.value[0]), 1)//这里获取不到evt.target.value[0]
		}
	},

原因分析:

for循环时连带checkbox-group都被循环了,不是一个整体所以拿不到。


解决方案:checkbox-group放到for循环外面

<checkbox-group @change="radioChange">//checkbox-group不能放到循环里面
	<view class="intro" v-for="(item,index) in data" :key="item.index">
		<view class="introName"><text class="introLable">用户名</text>{{item.ming}}
			<view v-show="isRadio" class="radio">
					<checkbox :value="item.number"  class="radio" ></checkbox>
			</view>
		</view>
	</view>
</checkbox-group>
//JS代码
	radioChange: function(evt) {
		this.value=evt.target.value
			console.log(this.value)
		},

此时不再需要判断是否选中,组件自带value新增与删除

成功解决
特此记录

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐