How to get the value of button when clicked using vue.js

Question

I have several buttons on a page which are hooked to the same method webcamSendRequestButton

<button v-on:click="webcamSendRequestButton" value="0" type="button" class="webcam-send-request-button" :disabled="disabled">Verify</button>
<button v-on:click="webcamSendRequestButton" value="1" type="button" class="webcam-send-request-button" :disabled="disabled">Verify</button>
<button v-on:click="webcamSendRequestButton" value="2" type="button" class="webcam-send-request-button" :disabled="disabled">Verify</button>
<button v-on:click="webcamSendRequestButton" value="3" type="button" class="webcam-send-request-button" :disabled="disabled">Verify</button>

and I am making an ajax call when the button is clicked. In jquery or JS it is pretty straightforward to get the value of button when clicked using $(this).val();

How do I fetch the value of the button when it is clicked in vue?

var app = new Vue({
    el: '#my-div',
    methods: {
        webcamSendRequestButton: function() {

            const buttonValue = ??? // How do I fetch the value over here

            $.ajax({
                url: "someurl",
                type: "POST",
                data: {
                    value: buttonValue
                },
                success: function (data) {
                    // Omitted for brevity
                }
            });
        }
    }
});

Rashad Saleh · Accepted Answer · 2017-09-01 10:26:23Z

30

A better answer than the previous ones I believe is to inject the original DOM '$event' variable into your handler call:

v-on:click="webcamSendRequestButton($event)"

And receive it in your handler:

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

This is better for two well-connected reasons.

First, the code now has the same reasoning behind the initial intention: When a button is clicked, the handler should be able to read the value of the button that initiated the event. Other solutions that pass the value statically to the handler only mimic this, thus being more or less a hack.

Second, because the code now exactly matches the initial intention, the code becomes more maintainable. For example, if the value of each button gets to change dynamically by being bound to a variable value instead of a static value, the handler needs not to be changed at all. If the buttons grow or shrink in number, there is no need to change the handler code or define extra references or change the syntax of the handler call.

edited Sep 1, 2017 at 10:26

answered Aug 31, 2017 at 10:51

Rashad Saleh

2,8471 gold badge25 silver badges29 bronze badges

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

12 Comments

0xburned Over a year ago

It doesn't work. I can not see the buttonValue passed to the data method in the ajax call. The whole object is missing from the header value: buttonValue. The solution which works is the accepted one.

Rashad Saleh Over a year ago

If you do console.log(e.target.value) at the top of the handler's code, do you get the correct value? Have you tried using the native modifier for your v-on:click directive making it v-on:click.native?

Rashad Saleh Over a year ago

I know the accepted answer works, but if the value of the button no longer is statically supplied to the view itself as a literal number, and instead become dynamic as the value of a variable, that method won't work anymore. You might find this required.

Rashad Saleh Over a year ago

That is strange. If you make a JSFiddle I can take a look and give you further help.

0xburned Over a year ago

I didn't add .native at the first place. Anyway, your solution for the general issue works fine. Why is it not working in my code base is my problem to solve. Thanks!

|

reinarg · Accepted Answer · 2017-08-31 10:03:25Z

11

You can simply give it as an argument to the function.

<button v-on:click="webcamSendRequestButton(0)"  type="button" class="webcam-send-request-button" :disabled="disabled">Verify</button>

JS

...
methods: {
  webcamSendRequestButton(value){
     //"value" is the clicked button value
  }
}
...

answered Aug 31, 2017 at 10:03

reinarg

4565 silver badges6 bronze badges

Comments

fweidemann14 · Accepted Answer · 2017-08-31 10:22:58Z

2

You can give your button a reference that Vue can access by giving it a tag ref="yourRef". Then you can access the value inside of your called function with this.$refs.yourRef.value.

Works for other Input elements as well ;)

answered Aug 31, 2017 at 10:22

fweidemann14

2,0533 gold badges15 silver badges21 bronze badges

Comments

Nodira · Accepted Answer · 2018-12-29 19:41:38Z

I have a button group, and three buttons in it. I wanted to get the string from each button button when there is a change, and change my attribute to that string value when there is a change in button. I used @change event of vuejs and it worked for me. I will be pleased if it will be helpful for someone else too.

In template:

    <div class="btn-group">
      <button
        type="button"
        class="btn btn-md light btn__border"
        v-on:change="latestType = 'week'"
      >Week</button>
      <button
        type="button"
        class="btn btn-md light btn__border"
        v-on:change="latestType = 'month'"
      >Month</button>
      <button
        type="button"
        class="btn btn-md light btn__border"
        v-on:change="latestType = ''"
      >All</button>
    </div>

In Js (script tag):

...
data() {
  return {
    latestType:''
  }
}
...

johnnycho · Accepted Answer · 2019-10-12 20:32:09Z

One improvement over the accepted answer by reinarg is to access the button's value directly using event.srcElement. This way you don't have to pass an argument into webcamSendRequestButton in the template. In fact, the OP wouldn't have to change the template at all and would have to change only one thing in the method:

webcamSendRequestButton: function() {

    const buttonValue = event.srcElement.value // This provides the button's value

    $.ajax({
        url: "someurl",
        type: "POST",
        data: {
            value: buttonValue
        },
        success: function (data) {
            // Omitted for brevity
        }
    });
}

This also avoids having to enter the same value in two places for each button (once in the value attribute and again as an argument for the webcamSendRequestButton method).

Collectives™ on Stack Overflow

How to get the value of button when clicked using vue.js

5 Answers 5

12 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

12 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest