时间戳

首页 > 解决方案 > 如何从 Vue.js 中的 HTML 元素获取 id

javascript - 如何从 Vue.js 中的 HTML 元素获取 id

问题描述

我有一个 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);
}

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

标签： javascripthtmlvue.js

解决方案

<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 以从元素中获取价值。

推荐阅读