如何在Vue.js中从HTML元素中获取id

Question

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

在这种情况下，我返回一个undefined。有什么问题吗?

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