uniapp项目小程序
<checkbox-group v-model="checkedList" @change="checkboxChange">
<uni-card title="基础卡片" class="list-box" v-for="(item,index) in ComListSon" :key="item.INSTMID">
<template v-slot:title>
<view class="list-box-title">
<label class="titleName">
<checkbox v-model="item.INSTMID" :value="item.INSTMID" :checked="item.checked"></checkbox>
</label>
<view class="link-detail" @click="linkComListSon(item.INSTMID)">
<text>查看详情</text>
</view>
</view>
</template>
<view class="list-box-content">
<view class="content-left">
<text>{{item.INSTMNAM}}</text>
<text>{{item.INSTMSUPPL}}</text>
</view>
<view class="content-right">
<uni-number-box v-model="item.num" :min="1" :max="9"></uni-number-box>
<uni-icons class="iconDel" type="trash" color="#ff0000" @click="singleDel(item)" />
</view>
</view>
</uni-card>
</checkbox-group>
data中设置
ComListSon: [{
INSTMID: 1,
img: " https://ts1.cn.mm.bing.net/th?id=OIP-C.SzR5o5S31Xd1UjLkxQbqQwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.7&pid=3.1&rm=2",
INSTMNAM: '锁骨器械',
INSTMSUPPL: '器械供应商一',
num: 1
}, {
INSTMID: 2,
img: "https://ts1.cn.mm.bing.net/th?id=OIP-C.SzR5o5S31Xd1UjLkxQbqQwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.7&pid=3.1&rm=2",
INSTMNAM: '锁骨器械',
INSTMSUPPL: '器械供应商一',
num: 1
}],
isAllSelected: true,
checkedList: [], // 默认选中的值
watch中监听
isAllSelected: {
handler(n) {
console.log("一开始默认全选", n)
// console.log(this.ComListSon)
if (n) {
// console.log("默认一开始全部选中,把数组的值全设置选中")
this.ComListSon.forEach((item, index) => {
this.$set(item, 'checked', true)
})
} else {
if (this.checkedList.length == 0 || this.checkedList.length == this.ComListSon.length) {
this.ComListSon.forEach((item, index) => {
this.$set(item, 'checked', false)
})
}
}
},
isAllSelected初始值是true,在监听中,确实是因为true进入if,但是却没有执行遍历数组ComListSon赋值checked为true,同时还不明白的是,在进入if之前,我打印了数组ComListSon,却发现数组里已经又checked属性了,这是为什么,涉及到了哪些知识点,求指教
在进入监听中的if语句之前,数组ComListSon中确实没有checked属性,因为在模板中,checkbox组件的checked属性绑定的是item.checked,而这个属性在ComListSon中是不存在的。但是在模板中,当用户进行勾选操作后,v-model="checkedList"会将选中的值添加到checkedList数组中,同时会触发@change事件,checkboxChange方法中会更新ComListSon数组中每个item的checked属性。因此,在监听中的if语句执行之前,ComListSon数组中已经有了checked属性。这里涉及到Vue的响应式原理,当使用$set方法添加一个新属性时,Vue会将该属性设置为响应式属性,从而使得该属性的变化也能触发视图更新。