vue的methods属性的方法中出现回调函数,在回调函数内部获取data中的数据

vue的methods属性的方法中出现回调函数,在回调函数内部获取data中的数据,第1张

在vue中,可能会遇到在methods属性中书写的方法中出现回调函数的情况,如以下代码:

data(){
	return{
		gemometry: ""
	}
}
methods: {
	draw(){
		map.changeDragMode('drawPolygon', function(e){
			this.geometry = e.getCoord()
		})
	}
}

该代码主要想把函数参数中的坐标值绑定到data数据中,但是这里是不可行的,因为此时的函数内部绑定的this是该函数下的this,而不是vue中的this值,如果想完成绑定,主要有两种方法解决。

第一种是将this保存后再使用,实现的代码如下:

draw(){
	let _this = this
	map.changeDragMode('drawPolygon', function(e){
		_this.geometry = e.getCoord()
	})
}

第二种是将function转换为箭头函数,箭头函数内部的this总是指向词法作用域,是外层调用者,在这里是依旧指向的是vue对象,实现的代码如下:

draw(){
	map.changeDragMode('drawPolygon', e => {
		this.geometry = e.getCoord()
	})
}

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1299004.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表(0条)

保存