vue的data绑定ajax得到的数据,无法绑定
在vue的mounted中,使用ajax渲染页面数据使,明明ajax已经从后台取得数据,但无法将数据放到vue对象的data中,
可能是因为this的指向问题,
var header = new Vue({
el: '#header',
data:{
userinfo:{}
},
mounted:function(){
var getUserurl = "/api/user/"+loginname;
console.log(getUserurl)
//var _this = this
$.get(getUserurl, {}, function(){
if(res.success) {
console.log( res.data);
//此时this指向了 ajax 的方法,因指向问题,无法将数据绑定到data
this.userinfo = res.data;
} else {
// 登录失败
j.sendWarning("失败了", 3000, function() {
console.log('sendWarning closed');
});
}
}, "json");
},
});
可以使用箭头函数,或者将this赋值给变量解决
解决:
1. 用箭头函数,把this的指向 指向vue对象
var header = new Vue({
el: '#header',
data:{
userinfo:{}
},
mounted:function(){
var getUserurl = "/api/user/"+loginname;
console.log(getUserurl)
$.get(getUserurl, {}, res => {
//此时,this指向vue对象,而不是ajax的回调函数
if(res.success) {
console.log( res.data);
this.userinfo = res.data;
} else {
// 登录失败
j.sendWarning("失败了", 3000, function() {
console.log('sendWarning closed');
});
}
}, "json");
},
});
2.将this赋值给变量_this,使_this指向vue对象
var header = new Vue({
el: '#header',
data:{
userinfo:{}
},
mounted:function(){
var getUserurl = "/api/user/"+loginname;
console.log(getUserurl)
var _this = this //把ajax外的this复制给_this,这样_this就指向vue对象了
$.get(getUserurl, {}, function(){
if(res.success) {
console.log( res.data);
//在这里调用_this,
_this.userinfo = res.data;
} else {
// 登录失败
j.sendWarning("失败了", 3000, function() {
console.log('sendWarning closed');
});
}
}, "json");
},
});