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

这对两个关联良好的原因更好。

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

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

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

Answer 3

您可以通过为其添加标记ref="yourRef"，为您的按钮提供Vue可以访问的参考。然后，您可以使用this.$refs.yourRef.value访问被调用函数内部的值。

也适用于其他输入元素;）

Answer 4

我有一个按钮组，其中有三个按钮。我想在发生变化时从每个按钮按钮获取字符串，并且在按钮发生变化时将属性更改为该字符串值。我使用了@change的{{1}}事件，它对我有用。如果它对其他人也有帮助，我将感到高兴。

在模板中：

vuejs

在Js（脚本标记）中：

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

Answer 5

reinarg接受的答案的一个改进是直接使用event.srcElement访问按钮的值。这样，您不必将参数传递到模板中的webcamSendRequestButton中。实际上，OP根本不需要更改模板，而只需要更改方法中的一件事：

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

这还避免了每个按钮必须在两个位置输入相同的值（一次在value属性中，再次作为webcamSendRequestButton方法的参数）。

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

5 个答案: