vue3的watch除了监听指定的对象,回调函数里的对象为什么也被监听了?
场镜
做一个复选框全选功能,复选框绑定一个checkedAll的ref,然后其他选项比较多,我使用了一个reactive,然后我监听checkedAll,循环更改其他复选框。
代码
const keyList = [
{ key: 'name', text: '姓名' },
{ key: 'age', text: '年龄' },
{ key: 'hobby', text: '爱好' },
]
watch(checkedAll, () => {
keyList.forEach((item) => {
checkData[item.key] = checkedAll
})
})
现象
全选功能没问题,点击全选之前,单独点击下面的选项,全选不受影响,但是点击过全选之后,也就是watch执行后,再点击下面的选项,全选也会受影响,然后就又执行watch了。
为什么执行过watch后,checkData的更改也被监听了呢?
回复
1个回答
test
2024-07-05
watch(checkedAll, () => {
keyList.forEach((item) => {
// 是否少写了.value
checkData[item.key] = checkedAll.value
})
})
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容