使用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

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

<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 2

你可以给你的按钮的引用Vue公司可以给它一个标签ref="yourRef"访问。然后，您可以使用this.$refs.yourRef.value访问被调用函数内部的值。

Works的其他投入要素为好;）

Answer 3

比以往我相信更好的答案应该是原来的DOM“$event”可变注入到你的处理程序调用：

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

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

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

这对于两个连接良好的原因更好。

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

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