Vue2.0中data中对象的对象数据不能更新到view层

发布于 2022-09-04 10:09:00 字数 1841 浏览 15 评论 0

clipboard.png

描述:
我用的框架是 webpack+vue2.0+vue-router2.0+vue-loader
像上图那种,在一个vue组件中data的一个domesticForm对象,domesticForm对象又有一个result对象,当我第一次通过ajax给result赋值时,view层会自动更新数据。

问题:
但是,当我第2、3...次通过ajax给result对象赋值的时候,view层不会更新数据,通过Vue-DevTool工具都能看到result对象里的数据有更新了,但view层就是不会更新数据,想知道这是为什么?

请问大家有遇到这个问题吗?我只记得数组是不能直接赋值更新数据的,但是对象怎么也这样呢?求教

补充下ajax之后result的赋值代码,大概就是这样

this.domesticForm.result.TotalAmount = data.data.BZYZ;
this.domesticForm.result.typeName = this.typeName; 
...

答案已经有了,但还不够完善,说下我自己理解的吧,具体也可以看下官方给的解释:http://vuejs.org/v2/guide/rea...
解决方案有两个:
一是给result对象的所有属性都预先在data定义好,比如我代码里的TotalAmount、typeName属性
二是如果不预先在data定义好的话,就得重新给result赋值一个新的对象{},例如下面这样做

this.domesticForm.result = {};
this.domesticForm.result.TotalAmount = data.data.BZYZ;
this.domesticForm.result.typeName = this.typeName;

那么,到底原理是什么?

clipboard.png

clipboard.png

而这个问题发生的前提是我只预先在data里给result对象为{},而没定义result对象里的属性,所以
Vue只会给result对象转换为getter/setter,而不会给result对象里的属性转换为getter/setter
Vue只会给result对象转换为getter/setter,而不会给result对象里的属性转换为getter/setter
Vue只会给result对象转换为getter/setter,而不会给result对象里的属性转换为getter/setter
重要的事情说三遍

clipboard.png

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

独守阴晴ぅ圆缺 2022-09-11 10:09:00

试下用$set()方法来为result赋值看看?

不奢求什么 2022-09-11 10:09:00

说一下你怎么赋值吧

青春如此纠结 2022-09-11 10:09:00

ajax如果是对result内的属性直接赋值,第一次也不应该生效的吧?除非是对result整体赋值,才会触发result的get、set方法。这种跟次数无关。
通过增加属性方式赋值,由于没有get set方法,而视图不生效。
不知道你说的是不是这个意思。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文