问题描述
原因分析
- 原因1:存在this指向问题,没有真正更新到data
- 原因2:Vue不能检测对象属性的添加或删除
- 原因3:更新的层级太深
解决方法
- 处理原因1:存储外部环境this指针,在异步回调函数中使用
var self = this;
$.get({
url: '/api',
success: function(res){
self.list = res.data;
}
})
var self = this;
Vue.set(self.template, 'name', 'Kevin');
- 处理原因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;
}
}