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

這對於兩個連接良好的原因更好。

第一個，代碼現在具有與初始意圖相同的推理：當單擊按鈕時，處理程序應該能夠讀取啓動事件的按鈕的值。其他解決方案將值靜態傳遞給處理程序只有模擬這個，因此或多或少是一個黑客。

第二個，因爲代碼現在完全符合最初的意圖，代碼變得更容易維護。例如，如果每個按鈕的值通過綁定到變量值而不是靜態值來動態更改，則該處理程序根本不需要進行任何更改。如果按鈕的數量增加或減少，則不需要更改處理程序代碼或定義額外的引用或更改處理程序調用的語法。