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

Question

I have a Vue application, where I have several identic fontawesome logos with different id's.

<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>

Now when I click on one of those logos i execute the following method:

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

When I now click on a logo i get an empty console output. I googled this problem many times and also tried things like:

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

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

In this case I return a undefined. What could be the problem?

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);
}

as Deepak mentioned in comment all you need to do is get event target id to get value from elemen.