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

原文由 zaq 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 reinarg 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

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

出于两个紧密联系的原因，这更好。

首先，代码现在在初始意图背后具有相同的推理：当单击按钮时，处理程序应该能够读取启动事件的按钮的值。将值静态传递给处理程序的其他解决方案仅 模仿 这一点，因此或多或少是一种黑客行为。

其次，由于代码现在完全符合最初的意图，代码变得更易于维护。例如，如果每个按钮的值通过绑定到变量值而不是静态值来动态更改，则根本不需要更改处理程序。如果按钮数量增加或减少，则无需更改处理程序代码或定义额外的引用或更改处理程序调用的语法。

原文由 Rashad Saleh 发布，翻译遵循 CC BY-SA 3.0 许可协议