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

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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:''
  }
}
...