Vue 回调函数中this无效
Vue 回调函数中this无效1、在回调函数之前将 vue 实例 this 赋值给一个变量,在回调函数中使用该变量2、使用箭头函数3、在 methods 中定义一个函数,回调函数使用该函数记录在vue项目中使用回调函数时调用this无效问题vue 在回调函数中 this 并不是指向 vue 实例,我在回调函数中打印了下,结果是undefined,而网上的一些博客说是 window 或 undefi
·
记录在vue项目中使用回调函数时调用this无效问题
vue 在回调函数中 this 并不是指向 vue 实例,我在回调函数中打印了下,结果是undefined,而网上的一些博客说是 window 或 undefined,这里 window 没有出来,可能和我写的函数有关系,以后碰到再说。
直接上解决方案:
1、在回调函数之前将 vue 实例 this 赋值给一个变量,在回调函数中使用该变量
requestHistoryList (mobileNumber, channelIndex) {
......
var _that = this
this.sendCommand(url, params,function (ret) {
console.log(_that)
if (ret.code == 0) {
if (ret.data.sendResult == "SUCCESS") {
var parse = JSON.parse(ret.data.params);
_that.playBackVideoList = parse.infos
console.log(_that.playBackVideoList)
}
}else {
alert(ret.msg);
}
})
},
2、使用箭头函数
箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。箭头函数完全修复了this的指向,this总是指向词法作用域。
requestHistoryList (mobileNumber, channelIndex) {
......
this.sendCommand(url, params, (ret) => {
if (ret.code == 0) {
if (ret.data.sendResult == "SUCCESS") {
var parse = JSON.parse(ret.data.params);
this.playBackVideoList = parse.infos
console.log(this.playBackVideoList)
}
}else {
alert(ret.msg);
}
})
},
3、在 methods 中定义一个函数,回调函数使用该函数
requestHistoryList (mobileNumber, channelIndex) {
......
this.sendCommand(url, params, this.paresVideoData)
},
paresVideoData (ret) {
if (ret.code == 0) {
if (ret.data.sendResult == "SUCCESS") {
var parse = JSON.parse(ret.data.params);
this.playBackVideoList = parse.infos
console.log(this.playBackVideoList)
}
}else {
alert(ret.msg);
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)