問題描述:
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)
},
成功解決
特此記錄