Vue 更新Data数据页面无反应问题

转：https://www.cnblogs.com/KevinTseng/p/12427486.html

原因分析
原因1：存在this指向问题，没有真正更新到data
原因2：Vue不能检测对象属性的添加或删除
原因3：更新的层级太深

解决方法
处理原因3：建议对象层级设计时尽量扁平化
方法一：使用强制刷新
var self = this;
self.tempalte.hobby.games.football.color = 'blue';
self.$forceUpdate();
方法二：创建一个指向深层级的变量，然后直接更新该变量
data: {
    tempalte: {
        hobby: {
            games: {
                football:{
                    color: ''
                }
            }
        }
    }
},
mounted: {
    var self = this;
    self.footballColor = self.tempalte.hobby.games.football.color;
},
methods: {
    setFootballColor: function(color){
        var self = this;
        self.footballColor = color;
    }
}

 

end.