如何在Vue.js中点击时获取并操作被点击的对应DOM元素

原有代码错误说明 #

你写的代码存在两个核心问题：

• myFunc 方法内的this默认指向当前Vue组件实例，而非触发点击事件的DOM元素
• document.querySelector 接收的参数应为合法的CSS选择器字符串，传入组件实例不会返回任何目标元素

正确实现方案 #

方案1：通过事件对象直接获取（推荐，适配单个/列表循环生成的元素） #

1. 给点击事件绑定传入内置的$event事件对象：

<a @click="myFunc($event)"> Click Me </a>

2. 方法内通过事件对象的currentTarget属性获取绑定事件的DOM元素：

methods : {
  myFunc(event){
    // currentTarget始终指向绑定了@click事件的元素，target指向实际触发点击的子元素（如果有嵌套的话）
    const targetEl = event.currentTarget
    // 接下来就可以对targetEl做DOM操作，比如修改样式、内容等
    targetEl.style.color = 'red'
    targetEl.textContent = 'Clicked'
  }
}

方案2：通过ref绑定获取（适合单个固定元素场景） #

1. 给目标元素添加ref属性标记：

<a @click="myFunc" ref="clickBtn"> Click Me </a>

2. 方法内通过this.$refs访问标记的DOM元素：

methods : {
  myFunc(){
    const targetEl = this.$refs.clickBtn
    // 后续DOM操作逻辑同上
  }
}

额外提示 #

Vue框架优先推荐使用数据驱动的方式修改元素状态，比如通过动态绑定:class、:style来修改元素样式/属性，非必要场景尽量避免直接操作原生DOM，减少状态不一致的问题。

内容的提问来源于stack exchange，提问作者Bleron Parduzi