如何从 Vue.js 中的 HTML 元素获取 id答案

【问题标题】：How to get id from HTML Element in Vue.js如何从 Vue.js 中的 HTML 元素获取 id
【发布时间】：2021-10-15 05:13:52
【问题描述】：

我有一个 Vue 应用程序，其中有几个具有不同 ID 的相同字体。

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

现在，当我单击其中一个徽标时，我会执行以下方法：

getId(event){
      console.log(event.currentTarget.id);
    }

当我现在单击一个徽标时，我得到一个空的控制台输出。我用谷歌搜索了这个问题很多次，也尝试过类似的方法：

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

getId(logo){
  console.log(logo.id);
}

在这种情况下，我返回一个未定义的。可能是什么问题？

【问题讨论】：

你试过event.target.id 吗？此外，您不应该只输入数字作为 ID，ID 属性必须以 _ 或任何字母开头。

标签： javascript html vue.js

【解决方案1】：

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

getId(logo){
 console.log(event.target.id);
}

正如 Deepak 在评论中提到的，您需要做的就是获取事件目标 ID 以从元素中获取价值。

【讨论】：