Vue - 我如何傳遞按鈕值以提交表單？

Question

我創建了一個 Vue 表單，其中有兩個按鈕。 在我的formSubmit() function 中，我需要以某種方式找到用於提交表單的按鈕。 這是我嘗試過的：

<form @submit.prevent="formSubmit()">
  <input type="text" class="form-control" v-model="name">
  <input type="text" class="form-control" v-model="product">
  <button class="btn btn-primary" v-model="buttonType" value="button1">BUTTON1</button>
  <button class="btn btn-primary" v-model="buttonType" value="button2">BUTTON2</button>
</form>

還有我的 function：

formSubmit(){
  console.log(this.buttonType)
}

但是一旦我點擊按鈕，我總是得到一個undefined 。 有沒有其他方法可以獲取用於提交表單的按鈕？ 任何建議表示贊賞。

Answer 1

您不應該真正在<button>元素上使用v-model 。

您可以為每個按鈕注冊單獨的事件處理程序，並在相應事件處理程序發生時調用提交表單。

<form @submit.prevent="onFormSubmit">
  <button @click="onClickButton1">Button 1</button>
  <button @click="onClickButton2">Button 2</button>
</form>

{
  // ...
  methods: {
    onFormSubmit() {},
    onClickButton1() {
      // code for when button 1 is pressed
      this.onFormSubmit()
    },
    onClickButton2() {
      // code for when button 2 is pressed
      this.onFormSubmit()
    },
  },
}