欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue中事件方法参数传this指向null的解决

程序员文章站 2022-06-17 08:55:20
vue中事件方法参数传this指向null的解决问题描述以前用JS的时候,一个元素要使用点击事件的话可以直接在元素内使用click指向某个方法或者获取这个元素绑定点击事件,那么在元素内使用click调用方法时,可以将当前元素自身通过方法参数传进方法,类似这样
然后在fun方法获取this就是这个元素了和document.getElementById(‘app’)获取的是一样的 直接传thi...

vue中事件方法参数传this指向null的解决

问题描述

以前用JS的时候,一个元素要使用点击事件的话可以直接在元素内使用click指向某个方法
或者获取这个元素绑定点击事件,那么在元素内使用click调用方法时,
可以将当前元素自身通过方法参数传进方法,类似这样

<div id="app" onclick="fun(this)">
</div>

然后在fun方法获取this就是这个元素了
和document.getElementById(‘app’)获取的是一样的 直接传this显然更方便
可以在方法里操作这个元素

那在vue里还是这样吗?

<div id="app" @click="fun(this)">
</div>

不是的 传递进入的this指针是null 并不是当前标签对象

解决方法

使用@click($event) 传递

<div id="app" @click="fun($event)">
</div>

在方法里使用 event.currentTarget获取当前对象

fun(event){
	 let app=event.currentTarget
}

本文地址:https://blog.csdn.net/qq_45454550/article/details/107879829