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