How to pass an id @click on vue js?

Question

I want to pass id by this.id parameter but I can´t send and receive it. How can I send this.id for parameter on vue.js?

<button 
    id="txt"
    @click="activate(this.id)"
    class="kind-btn"
    type="button"
>
    <i class='fas   fa-poll-h kind-icon'></i>
</button>
<button
    id="pic"
    @click="activate(this.id)"
    class="kind-btn"
    type="button"
    style="padding-left: 15px;"
>
    <i class='fas fa-image kind-icon'style="font-size: 30px;"></i>
</button>
<button
    id="sound"
    @click="activate(this.id)"
    class="kind-btn"
    type="button"
>
    <i class="material-icons kind-icon"style="font-size: 31px;top: 8px;margin-bottom: 13px;">music_video</i>
</button>

// js

activate: function(i) {
  console.log(i);
  switch (i) {
    case "txt":
      $("#" + this).css({"background-color": "#fe5d87", "color": "white"});
      break;

    case "pic":
      $("#" + this).css({"background-color": "#fe5d87", "color": "white"});
      break;

    case "sound":
      $("#" + this).css({"background-color": "#fe5d87", "color": "white"});
      break;
    // 
    // default:
    //   $("#txt").css({"background-color": "#fe5d87", "color": "white"});
  }

i wanna pass id by this.id parameter but i cant send and recieve it — ali shamsi
– ali shamsi, Commented Aug 28, 2021 at 17:59
You can´t refer to the id of a button by using @click="activate(this.id)". this.id would reffer to a property called id in you component. — StevenSiebert
– StevenSiebert, Commented Aug 28, 2021 at 19:28

tony19 · Accepted Answer · 2022-07-15 01:13:57Z

2

https://v2.vuejs.org/v2/guide/events.html

You can do @click="activate"

methods: {
    activate: function (event) {
        console.log(event.target.id)
    }
}

The other way is to pass the event, if you needed to pass more data

@click="activate('your custom data string', $event)"

edited Jul 15, 2022 at 1:13

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 28, 2021 at 18:01

digitalniweb

1,1421 gold badge10 silver badges21 bronze badges

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

4 Comments

ali shamsi Over a year ago

tnks but i wanna use this.id like onclick() method on js not by event or if it was i wanna define vue by this.id not write 'your custom data string'

ali shamsi Over a year ago

like this .. @click="activate(this.id , $event)"

digitalniweb Over a year ago

@click="activate($event.target.id)"

StevenSiebert Over a year ago

@alishamsi You have to understand how vue.js works. As I stated in my comment at your question, you can´t use this.id like that. This here is a good answer.

Collectives™ on Stack Overflow

How to pass an id @click on vue js?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related