vue2.0关于set添加属性后视图不能更新的问题

今天发现原来写的页面的bug

总的来说就有一个组件,有加减号和次数显示,第一次点击加号会用set给food对象添加属性count,然后再次点击加号就会count++,这没毛病。

if (!this.food.count) {
          Vue.set(this.food, 'count', 1);
        } else {
          this.food.count++;
        }

但是还有一其他组件的一个按钮,也是具有加号的功能,但是用这个按钮成功添加属性后,再点击第一个组件的加号按钮,但是视图没有改变,console.log(this.food.count)发现数据的确变了.

找了大半天不知道哪里有问题。

最后的解决方案:把代码改成

if (!this.food.count) {
          Vue.set(this.food, 'count', 1);
        } else {
          this.food.count++;
          let foodCount = this.food.count;
          Vue.delete(this.food, 'count');
          Vue.set(this.food, 'count', foodCount);
        }

因为试了大半天发现当我使用delete的时候,视图更新了……

但我感觉这样的解决方法是不对滴,不过现在就这吧,等以后对Vue的理解更深了以后再修改。


  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值