Vue中获取点击按钮名称及POST提交数据未传递问题

看起来你碰到了两个核心问题：表单提交后数据没通过POST请求传出去，同时需要捕获被点击按钮的名称。我来一步步帮你梳理解决方案：

一、先搞定POST数据未传递的问题 #

从你给出的代码片段来看，你用了v-on:submit.prevent="onSubmit($event)"阻止默认提交行为，那大概率是在onSubmit方法里手动处理请求。常见问题点和修复方式如下：

1. 确保数据已正确绑定并初始化 #

首先要在Vue实例的data里初始化绑定的变量，不然v-model没法正确关联：

new Vue({
  el: '#app',
  data() {
    return {
      cannedlist: '', // 和你input的v-model对应
      individuallist: '', // 对应代码里的disabled判断条件
      clickedButton: '' // 用来存储点击的按钮名称
    }
  },
  methods: {
    // 后续方法写在这里
  }
})

2. 正确发送POST请求（以axios为例，也可用fetch） #

既然用了Vue，更推荐用axios发送数据，比原生表单提交更灵活可控：

methods: {
  onSubmit(event) {
    // 先做表单验证（如果需要）
    if (!this.cannedlist && !this.individuallist) {
      alert('请填写必要内容');
      return;
    }

    // 准备要发送的数据包，包含表单值和点击的按钮名称
    const postData = {
      fileListFile: this.cannedlist,
      clickedButton: this.clickedButton
      // 如果需要传递individuallist，也可以加进来
    };

    // 发送POST请求
    axios.post('/push', postData)
      .then(response => {
        console.log('提交成功', response);
        // 成功后可以重置表单和按钮状态
        this.$refs.myForm.reset();
        this.clickedButton = '';
      })
      .catch(error => {
        console.error('提交失败', error);
      });
  }
}

如果坚持用原生表单提交，要确保input的name属性和v-model变量对应，并且在onSubmit里手动触发表单提交，但这种方式不如axios灵活。

二、获取被点击按钮的名称 #

给每个提交按钮绑定click事件，把按钮名称存到data里即可：

1. HTML按钮写法 #

假设你的表单里有多个提交按钮：

<button type="submit" @click="recordButtonName('列表推送')">列表推送</button>
<button type="submit" @click="recordButtonName('单个推送')">单个推送</button>

2. 对应的Vue方法 #

在methods里添加记录按钮名称的方法：

methods: {
  recordButtonName(btnName) {
    this.clickedButton = btnName;
  },
  // 上面的onSubmit方法保留
}

这样用户点击某个按钮时，clickedButton就会被赋值为对应名称，提交请求时就能把这个值一起传给后端了。

额外注意事项 #

• 确保按钮是type="submit"，这样点击时才会触发表单的submit事件；如果是type="button"，需要在click事件里手动调用this.onSubmit()。
• 如果你用了表单验证（比如代码里的needs-validation），要在onSubmit里先完成验证逻辑，再发送请求。
• 检查后端接口是否配置了正确的POST数据解析方式（比如Express里要加express.json()或body-parser）。

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