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

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

阅读 12.6k
3 个回答

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

说一下你怎么赋值吧

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题