Vue.js表单提交Flask服务器无数据，如何让浏览器POST带组件数据？

你遇到的问题本质是：Vue组件里的表单没有把组件内的数据同步到原生HTML表单控件上，所以浏览器发起POST请求时没法收集到数据；而用axios属于AJAX请求，默认不会触发页面跳转。下面给你两种实用的解决方案：

方案一：用Vue双向绑定同步原生表单控件（推荐） #

最直接的方式是用Vue的v-model把组件内的数据绑定到表单的<input>、<select>等原生控件上，同时给每个控件设置name属性——浏览器提交表单时会自动收集所有带name的控件值，这样Flask的request.form就能拿到数据，同时还能保留浏览器原生的页面跳转行为。

修改你的模板和组件代码：

<template id="Form-template">
<form id="myform" class="row border-between" @submit="checkForm" method="post">
  <!-- Data1 字段 -->
  <div class="form-group">
    <label>Data1 Item1</label>
    <input type="text" name="data1_item1" v-model="data1.item1" class="form-control">
    <span class="text-danger" v-if="errors.data1?.item1">[[ errors.data1.item1 ]]</span>
  </div>
  <div class="form-group">
    <label>Data1 Item2</label>
    <input type="text" name="data1_item2" v-model="data1.item2" class="form-control">
    <span class="text-danger" v-if="errors.data1?.item2">[[ errors.data1.item2 ]]</span>
  </div>

  <!-- Data2 字段（如果需要提交的话） -->
  <div class="form-group">
    <label>Data2 Item1</label>
    <input type="text" name="data2_item1" v-model="data2.item1" class="form-control">
  </div>
  <div class="form-group">
    <label>Data2 Item2</label>
    <input type="text" name="data2_item2" v-model="data2.item2" class="form-control">
  </div>

  <!-- 提交按钮 -->
  <button type="submit" id="data1-submit" class="btn btn-primary">提交 Data1</button>
</form>
</template>

对应的组件方法里，只需要保留验证逻辑，验证通过后不需要额外处理——浏览器会自动提交带数据的POST请求：

methods: {
  checkForm(e) {
    this.errors = {};
    let isValid = true;

    if (e.submitter.id === 'data1-submit') {
      this.method = 'data1';
      if (!this.data1.item1) {
        this.errors = _.merge({ data1: { item1: 'item1 required' } }, this.errors);
        isValid = false;
      }
      if (!this.data1.item2) {
        this.errors = _.merge({ data1: { item2: 'item2 required' } }, this.errors);
        isValid = false;
      }
    }

    // 验证不通过时阻止表单提交
    if (!isValid) {
      e.preventDefault();
    }
  }
}

Flask端就能正常获取数据了：

@app.route('/form', methods=['GET', 'POST'])
def form_page():
    if request.method == 'POST':
        print(request.form)  # 现在会输出包含data1_item1、data1_item2等的ImmutableMultiDict
        method = request.form.get('method')
        # 处理逻辑...
        return redirect('/success')  # 实现页面跳转
    return render_template('form.html')

方案二：手动构建FormData提交原生表单 #

如果因为某些原因不能用v-model绑定控件，可以在验证通过后，手动把Vue组件的数据添加到FormData对象里，然后调用原生表单的submit()方法触发提交——这样既携带了Vue的数据，又能触发浏览器的页面跳转。

修改组件的checkForm方法：

methods: {
  checkForm(e) {
    this.errors = {};
    let isValid = false;
    const formElement = e.target; // 获取原生form元素

    if (e.submitter.id === 'data1-submit') {
      this.method = 'data1';
      if (this.data1.item1 && this.data1.item2) {
        isValid = true;
      } else {
        // 错误提示逻辑不变
        if (!this.data1.item1) {
          this.errors = _.merge({ data1: { item1: 'item1 required' } }, this.errors);
        }
        if (!this.data1.item2) {
          this.errors = _.merge({ data1: { item2: 'item2 required' } }, this.errors);
        }
      }
    }

    if (isValid) {
      // 构建FormData，先把原生表单已有数据加进去（如果有的话）
      const formData = new FormData(formElement);
      // 添加Vue组件里的数据
      formData.append('method', this.method);
      formData.append('data1[item1]', this.data1.item1);
      formData.append('data1[item2]', this.data1.item2);
      // 也可以直接添加整个对象（Flask需要配置才能解析）
      // formData.append('data1', JSON.stringify(this.data1));

      // 替换表单的FormData并提交
      formElement.enctype = 'multipart/form-data'; // 确保能正确传输FormData
      formElement.submit();
    } else {
      e.preventDefault(); // 验证不通过阻止提交
    }
  }
}

这种方式下，Flask端同样可以通过request.form获取到你添加的数据，比如request.form.get('data1[item1]')或者解析JSON字符串（如果用JSON方式添加的话）。

两种方案都能解决你的问题：既让浏览器发起带数据的POST请求，又能实现页面跳转。方案一更符合Vue的设计思想，代码更简洁，优先推荐使用。

内容的提问来源于stack exchange，提问作者Dylan .B