天天看点

uniapp使用checkbox多选踩坑之路问题描述:原因分析:解决方案:checkbox-group放到for循环外面

问题描述:

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

uniapp使用checkbox多选踩坑之路问题描述:原因分析:解决方案:checkbox-group放到for循环外面
uniapp使用checkbox多选踩坑之路问题描述:原因分析:解决方案:checkbox-group放到for循环外面

这是错误代码:

<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)
		},
           
uniapp使用checkbox多选踩坑之路问题描述:原因分析:解决方案:checkbox-group放到for循环外面

成功解决

特此记录

继续阅读