在使用uview中checkbox组件循环选中报错。
话不多说直接上代码==>
这个这个页面的代码,框起来的是封装了uview的一个checkbox组件
<!--
mn-checkbox
-->
<template>
<view class="cell-check">
<u-checkbox
v-model="checkedData"
:name="cartId"
shape="circle"
active-color="#DE3221"
size="30"
@change="checkItemChange"
></u-checkbox>
</view>
</template>
<script>
export default {
name:"mn-checkbox",
props:{
cartId:{
type:String,
default: "",
},
isChecked:{
type:Boolean,
default:false,
},
},
computed:{
getIsChecked:{
get(){
return this.isChecked;
},
set(val) {},
},
},
data() {
return {
checkedData:false,
};
},
methods:{
checkItemChange(e){
let checkedVal = e.value;
this.$emit("checkItemChange",checkedVal,this.cartId);
},
},
watch:{
getIsChecked:{
handler(newVal,oldVal){
this.checkedData = newVal;
}
},
}
}
</script>
<style lang="scss" scoped>
.cell-check{
width: 40rpx;
height: 40rpx;
}
</style>
最主要的是这两块 computed和watch 把从子组件里面接收到的值 赋值给子组件里面定义的新的变量
解决不能在子组件内部修改props中的值。
=============end ok啦
希望能帮到您!
respect !!~