vue 数据发生改变,视图确没发生改变。

在Vue开发中遇到一个关于组件通讯的问题,当父组件向子组件传递数据并尝试在子组件内改变对象属性时,发现视图未更新。原因是Vue无法监听到新增属性的变化。解决方案是在初始化时为list对象添加check属性,并使用.map()确保数组变化被监听。此外,使用事件传递时正确修改对象状态并更新视图。
摘要由CSDN通过智能技术生成

有一段时间没碰到bug了,昨天碰到一个bug,弄的头有点小疼。
父组件里面,我请求接口获取数组 传给子组件 :list=list;
子组件接收。for list渲染列表。。
我的需求就是列表的每一项可以点击选中,再点击取消
在这里插入图片描述
就是点击左边的勾选。
然后我想的是,给list下的每个对象加一个check属性,在图片那里用三元表达式,为true就显示选中,为false就显示未☑️。
点击的事件 cell(item,index) .我把当前项和index传了过来。
在事件里面我用 item.check=!item.check console.log(item.check).
这时候发现,打印确实是true和false在切换,但是图片没有切换,,
就是说渲染的list没有发生改变,我又在点击事件里打印console.log(this.list)这是父组件传过来的数组,却发现,这里面的check属性确实也改变了, 我在template里面又用 {{item.check}}.发现什么都没。
初始化的this.list是没有check这个属性,这个属性是我点击后加上。视图没有更新。不是没更新。是没监听到check属性。所以我们在父组件获取到list的时候给它加上check:false。
在这里插入图片描述重新赋值会触发getter 对数组里的元素进行监听,此时有check 所以可以监听;
这里也注意一下,我用foreach没成功,使用的map成功了,因为foreach是修改没有返回,而map是返回一个新数组。

唉,记录一下,踩坑不要慌,一步一步的找到他的特性。发现他的问题。最后解决他。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MrHao_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值