如何在使用vue.js单击按钮时获取按钮值
如何在使用vue.js单击按钮时获取按钮值
提问于 2017-08-31 09:32:36
我在一个页面上有几个按钮，它们与相同的方法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
}
});
}
}
});回答 5
Stack Overflow用户
回答已采纳
发布于 2017-08-31 10:03:25
您可以简单地将其作为函数的参数。
<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
}
}
...Stack Overflow用户
发布于 2017-08-31 10:51:18
一个比以前更好的答案是将原始的DOM '$event‘变量注入到处理程序调用中：
v-on:click="webcamSendRequestButton($event)"
并在您的处理程序中接收它：
methods: {
webcamSendRequestButton: function(e) {
const buttonValue = e.target.value;
.
.
.
}
}这有两个相互关联的原因更好。
首先，代码现在有相同的理由背后的最初意图:当一个按钮被点击时，处理程序应该能够读取启动事件的按钮的值。其他静态地将值传递给处理程序的解决方案只是模仿这种情况，因此或多或少是一种黑客。
第二个，因为代码现在完全符合最初的意图，所以代码变得更易于维护。例如，如果每个按钮的值通过绑定到变量值而不是静态值来动态更改，则根本不需要更改处理程序。如果按钮数量增加或缩小，则不需要更改处理程序代码或定义额外的引用或更改处理程序调用的语法。
Stack Overflow用户
发布于 2017-08-31 10:22:58
您可以给按钮一个引用，Vue可以通过给它一个标记ref="yourRef"来访问它。然后，您可以使用this.$refs.yourRef.value访问被调用函数中的值。
也适用于其他输入元素;)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45978055
复制相关文章
相似问题
腾讯云开发者
