Vue.js中如何获取HTML Element的id？点击事件返回空或undefined求解

错误原因说明 #

第一个写法报错原因 #

你将click事件绑定在<p>标签上，event.currentTarget指向的是事件绑定的元素也就是<p>，而你把id属性写在了子元素<i>上，<p>本身没有设置id，所以输出为空。

第二个写法报错原因 #

Vue模板中直接写getId(this)时，这里的this指向的是当前Vue组件实例，不是你预期的<i>DOM元素，组件实例上没有id属性，所以返回undefined。

最优解决方案（推荐） #

不要依赖DOM属性传值，直接把id作为参数传入方法，完全避开DOM操作问题，还能兼容FontAwesome自动替换<i>为<svg>的场景：

<!-- 静态写死的场景 -->
<p @click="getId(1)" class="trash"><i class="fas fa-trash-alt"></i></p>
<p @click="getId(2)" class="trash"><i class="fas fa-trash-alt"></i></p>
<p @click="getId(3)" class="trash"><i class="fas fa-trash-alt"></i></p>

<!-- v-for循环渲染的场景更简洁 -->
<p v-for="id in 3" :key="id" @click="getId(id)" class="trash">
  <i class="fas fa-trash-alt"></i>
</p>

对应的方法：

getId(id){
  console.log(id); // 直接拿到对应id
}

如果你确实需要通过事件对象获取DOM #

把事件绑定到带id的<i>标签上，传入$event即可：

<p class="trash"><i id="1" @click="getId($event)" class="fas fa-trash-alt"></i></p>

getId(event){
  console.log(event.currentTarget.id); // currentTarget就是绑定事件的<i>元素
}

注意：如果你使用的是FontAwesome JS版本，它会自动把<i>标签替换为<svg>标签，原<i>上的id不会同步到新生成的<svg>上，该场景下此方案会失效，推荐用直接传参的方案。

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