天天看點

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循環外面

成功解決

特此記錄

繼續閱讀