时间戳

首页 > 解决方案 > Vue - 我如何传递按钮值以提交表单？

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

问题描述

我创建了一个 Vue 表单，其中有两个按钮。在我的formSubmit()功能中，我需要以某种方式找到用于提交表单的按钮。这是我尝试过的：

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

我的功能：

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

但是一旦我点击按钮，我总是得到一个undefined. 有没有其他方法可以获取用于提交表单的按钮？任何建议表示赞赏。

标签： javascriptvue.js

解决方案

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

您可以为每个按钮注册单独的事件处理程序，并在相应事件处理程序发生时调用提交表单。

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

推荐阅读