Vue2.0中data中对象的对象数据不能更新到view层
描述:
我用的框架是 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;
那么,到底原理是什么?
而这个问题发生的前提是我只预先在data里给result对象为{},而没定义result对象里的属性,所以
Vue只会给result对象转换为getter/setter,而不会给result对象里的属性转换为getter/setter
Vue只会给result对象转换为getter/setter,而不会给result对象里的属性转换为getter/setter
Vue只会给result对象转换为getter/setter,而不会给result对象里的属性转换为getter/setter
重要的事情说三遍
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
试下用
$set()
方法来为result赋值看看?说一下你怎么赋值吧
ajax如果是对result内的属性直接赋值,第一次也不应该生效的吧?除非是对result整体赋值,才会触发result的get、set方法。这种跟次数无关。
通过增加属性方式赋值,由于没有get set方法,而视图不生效。
不知道你说的是不是这个意思。