Vue表单提交时如何获取触发提交的按钮值？绑定v-model取值返回undefined

你之前的实现失效本质是Vue 的 v-model 指令并不支持直接绑定在普通 button 元素上。v-model 的设计适配对象是 input、select、textarea 这类可输入的表单控件，给 button 标签加 v-model 不会生成任何响应式绑定逻辑，对应的 buttonType 变量从来没有被赋值过，自然在提交时读出来永远是 undefined。

方案1：从原生提交事件的触发源读取按钮信息 #

这是最简洁、不需要额外冗余状态的首选实现方式：原生表单提交事件本身会携带submitter属性，专门存储当前触发提交的DOM按钮，直接读取对应按钮的value即可拿到标识。
实现代码如下：
模板部分：

<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" type="submit" value="button1">BUTTON1</button>
  <button class="btn btn-primary" type="submit" value="button2">BUTTON2</button>
</form>

方法逻辑：

methods: {
  formSubmit(e) {
    // 从原生事件对象中获取触发提交的按钮DOM
    const triggerButton = e.submitter
    console.log('触发提交的按钮标识：', triggerButton.value)
    // 后续补充正常提交逻辑即可
  }
}

注意：建议给所有提交按钮显式加type="submit"，避免部分浏览器对button默认类型解析不一致的问题。event.submitter 是W3C标准表单事件属性，所有现代主流浏览器都已支持，仅极老旧版本浏览器不兼容。

方案2：点击按钮时临时记录触发标识 #

如果需要兼容不支持event.submitter的老旧浏览器，可以通过点击事件临时记录当前触发提交的按钮值，再在提交逻辑中读取：
模板部分：

<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" 
    type="submit"
    @click="triggerType = 'button1'"
  >BUTTON1</button>
  <button 
    class="btn btn-primary" 
    type="submit"
    @click="triggerType = 'button2'"
  >BUTTON2</button>
</form>

组件逻辑：

data() {
  return {
    // 临时存储触发提交的按钮标识
    triggerType: ''
  }
},
methods: {
  formSubmit() {
    console.log('触发提交的按钮标识：', this.triggerType)
    // 提交完成后可按需清空临时变量，避免状态残留
    this.triggerType = ''
  }
}

内容的提问来源于stack exchange，提问作者JayK23