How to get id from HTML Element in Vue.js

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?

Have you tried event.target.id ? Also you should not put just numbers as the ID, ID attribute must start with _ or any alphabet. — Deepak Kamat
– Deepak Kamat, Commented Oct 15, 2021 at 5:18

kamran hassan · Accepted Answer · 2021-10-15 06:33:53Z

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.

answered Oct 15, 2021 at 6:33

kamran hassan

1761 gold badge1 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get id from HTML Element in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related