vue.js - 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
重要的事情说三遍

解决方案

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

这篇关于vue.js - Vue2.0中data中对象的对象数据不能更新到view层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！