Vue - 我如何传递按钮值以提交表单？

Question

I created a Vue form where there are two buttons. In my formSubmit() function i need to somehow find which button was used to submit the form. Here is what i tried:

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

And my function:

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

But once i click the button, i always get an undefined . Is there any other way to get the button used to submit the form? Any advice is appreciated.

Answer 1

You shouldn't really use v-model on a <button> element.

You can register separate event handlers for each button and call submit your form at the event of the respective event handlers.

<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()
    },
  },
}