使用vue.js单击时如何获取按钮的值

Question

我在页面上有几个按钮连接到同一个方法 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>

当点击按钮时,我正在进行ajax调用.在jquery或JS中,单击使用时获取按钮的值非常简单$(this).val();

如何在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

我认为比以前更好的答案是将原始DOM' $event'变量注入到处理程序调用中:

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

并在您的处理程序中接收它:

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

对于两个关联良好的原因,这更好.

首先,代码现在具有与初始意图背后相同的推理:当单击按钮时,处理程序应该能够读取启动事件的按钮的值.将值静态传递给处理程序的其他解决方案只能模仿这个,因此或多或少是一个hack.

其次,因为代码现在与初始意图完全匹配,所以代码变得更易于维护.例如,如果每个按钮的值通过绑定到变量值而不是静态值而动态变化,则根本不需要更改处理程序.如果按钮数量增加或缩小,则无需更改处理程序代码或定义额外引用或更改处理程序调用的语法.

Answer 2

您可以简单地将其作为函数的参数。

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