记录在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);
     }
},
Logo

前往低代码交流专区

更多推荐