vue无法更新数据(vue响应式)

32 篇文章 2 订阅
30 篇文章 0 订阅

原因:

今天写项目的时候页面有一个标题和状态一直没有发生变化。我一开始以为是异步的问题,也确实,异步方面确实存在问题。

但是当解决异步问题之后,发现我所需要的数据和状态依旧没有发生改变。

如图,1部分,我为了验证异步问题做了延迟处理。但是延迟3秒之后数据改变但是页面参数依旧没有改变。

所以我在页面上面干脆就做了一个按钮,这样无论如何都是不存在异步问题的。但是依旧不行。

我甚至一度怀疑自己是不是代码错了。(深深的怀疑)

然后我就百度了。

这里找到的原因:

参考:https://segmentfault.com/q/1010000010617986

vue深入响应式原理:https://cn.vuejs.org/v2/guide/reactivity.html

在原文章中有一句话:

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上

意思是你的对象如果是一个json对象或者数组,你如果直接使用我截图中的this方式是无法更改下级对象的。必须要在根对象发生变化的过程中就行修改。

最终我参考上面的地址

语句可以改写为

this.isgoodsinfo={
  ...this.isgoodsinfo,
  title:"商品更新",
  goodstype:3
};

直接修改根对象的方式。当然vue提供的方式,我还未使用,比如Vue.set。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值