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

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

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

Getting the value of a button using Vue.js, button class=“dropdown-item” :data-id="{{ $member->id }}" methods:{ registerMem(){ alert(this.dataID) } vale is undefine .. pls any help. I have a form that has three buttons and each need a value of 1, 2 and 3 respectively. They're placed in a form and the user is to click one of the three resulting in the form changing. I'm attempting to make an ajax call based upon the value of the button the user has pressed.

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.

Event Handling, <button v-on:click="greet">Greet</button>. </div>. We are binding a click event listener to a method named greet . You can pass it into a method using the special $event variable: In 1.0.16, two additional modifiers have been introduced:  Clicking the button now, will change its text to “Hello World!” Of course we could also have accomplished this with vanilla JavaScript by using a query selector to get access to the DOM element, but using the ref attribute is much cleaner and is the Vue way of doing it. It’s also safer because you won’t be relying on classes and IDs, so

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

How to get Id Value in Vue JS? - Get Help, VueJS - Events - v-on is the attribute added to the DOM elements to listen to the events On the click of the button, it will call the method 'displaynumbers', which takes in the In the above example, we have created a div with width and height as 100px. The same variable is binded to the div using v-bind:style = ”styleobj”. The following example will display the entered text in the input field on button click using JavaScript. ">Get Value</button> <script> function getInputValue

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

Methods and Event Handling, How do I get the values for Name and Company in the myMethod function without How to create a Machine Learning Model in Vue Js to start using Machine  If you want to use Vue.js in your projects, you need to create javascript files and in the body tag of HTML file, you have to add the following scripts. Let’s explore a little bit deeper how it

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

VueJS - Events, value in Vue.js. We will write button click event and get custom attribute value in Vue.js. We will get data attribute value using event.target.getAttribute(). Vue.js get dropdown selected value - You can get seelcted text or selected option value of a select box in vue.js using v-model. Here in this tutorial, we are going to explain how you can get selected option value and text in vue.js. You can use our online editor to edit and run the code online.

How to get form data from button click? : vuejs, I created a simple JavaScript application in Vue using a CDN The application has a title which will convert to upper case on clicking a button. I know In order to do that, all the HTML templates have to be under a single div with an id. We need to be able to display the value from the Vue data property. Hello everyone. I was trying to change a data property in my onclick event Like this: <button @click="newTitle = false">Save</button> . However this doesn't work. The alternative is to call a method which does the same in one line which would be kind of an overkill.

How to get data attribute value in Vue.js?, If you want to run some code when the user clicks a button, you should use v-on . the user clicks a button is using the v-on:click directive as shown below. const app = new Vue({ data: () => ({ value: 'Hello, World' }), template: ` <div So v-on:​click tells Vue to register a listener for the native 'click' event. Get Element By Id Or Refs Example. You can access any element using $refs in vue.js. Here is simple example.

How to implement a simple title change application using Vue.js, Order matters when using modifiers because the relevant code is generated in the same order. Therefore using v-on:click.prevent.self will prevent all clicks while v-on:click.self.prevent will only prevent clicks on the element itself. New in 2.1.4+ <!-- the click event will be triggered at most once --> < a v-on:click.once = "doThis" > </ a >

Comments
  • 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.
  • 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?
  • 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.
  • Ok, Some more update. It works on the first fired event only. For e.g if I click on a button with value="1" it sends value: 1. If I click another button the object is gone. However, it should send value: 2
  • 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!