Getting the value of button (vuejs)

Question

i want to get the value of the button when click i already add a method. but whenever i click theres nothing. the value not passing. can anyone help me? Thank you.

Here is the code:

<button
class="button buttonvalue"
v-for="(p,index) in buttonvalue"
:key="index"
@click="webcamSendRequestButton($event)"
>{{p}}</button>

Method:

  methods: {
    webcamSendRequestButton: function(e) {
    // const buttonValue = e.target.value;
    // console.log(e.target.value)
    alert(e.target.value);
    }
  }

DATA (Json) of button value

array data: small,medium,large

this.buttonvalue= this.item[0].buttonvalue.split(',');

palaѕн · Accepted Answer · 2020-06-16 05:40:26Z

1

To get value button value you can either bind a :value attribute first like:

<button
  class="button buttonvalue"
  v-for="(p,index) in buttonvalue"
  :key="index"
  @click="webcamSendRequestButton($event)"
  :value="p"
>{{p}}</button>

Then e.target.value will work fine.

Or, if you don't want to add another attribute, then you can simply use:

methods: {
  webcamSendRequestButton(e) {
     console.log(e.target.textContent)
  }
}

instead of using e.target.value.

Or, if the value p is required, then you can simply pass that to click handler like:

@click="webcamSendRequestButton(p)"

and then access it like:

methods: {
  webcamSendRequestButton(buttonvalue) {
     console.log(buttonvalue)
  }
}

answered Jun 16, 2020 at 5:40

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

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

Comments

Jakub A Suplicki · Accepted Answer · 2020-06-16 04:18:24Z

1

If you simply need to pass a value of p, for example then you would write:

@click="webcamSendRequestButton(p)"

then in your method:

  methods: {
    webcamSendRequestButton(val) {
       alert(val);
    }
  }

I am assuming that buttonvalue is some kind of array that you are looping through.

Hope it helps.

answered Jun 16, 2020 at 4:18

Jakub A Suplicki

4,8211 gold badge27 silver badges31 bronze badges

2 Comments

TechDev Over a year ago

Yes it did helppp.. just try now. Thank you very muchhhh!!!!

Jakub A Suplicki Over a year ago

Glad to hear. Enjoy Vue!

Collectives™ on Stack Overflow

Getting the value of button (vuejs)

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related