问题描述:
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)
},
成功解决
特此记录