Vue如何对表单数据进行分组答案

【问题标题】：How to group form data with VueVue如何对表单数据进行分组
【发布时间】：2019-07-16 01:29:49
【问题描述】：

我有一些代码可以创建动态输入和选择：

<div v-for="(index) in rows">
    <select>
        <option selected="true" disabled>Select Type</option>
        <option>Name</option>
        <option>Address</option>
        <option>Email</option>
        <option>Phone</option>
        <option>Medical</option>
        <option>Tax File Number</option>
        <option>Card Number</option>
        <option>Financial Card</option>
        <option>Medical Card</option>
        <option>Social Card</option>
    </select>
    <input type="text" list="predictive_data" class="uk-input">
</div>

<button v-on:click="addRow" type="button">Add Input</button>

这很好用，但我的问题是我想以某种方式对输入进行分组。如果有多个姓名和多个电子邮件，当它被发送到我的 Flask 后端时，我可以看到谁的数据是谁的。

目前，如果我要添加 3 个姓名和 1 封电子邮件，它会像这样到达我的后端：

Name:['John Smith', 'Jane Doe', 'Bob Alan'], Email:[coolkid69@email.com]

如您所见，我不知道谁拥有这封电子邮件。我更喜欢这样：

{Name:'John Smith'}, {Name:'Jane Doe', Email:'coolkid69@email.com'}, {Name:'Bob Alan'}

【问题讨论】：

添加一个button，上面写着StartFormGroup，然后在那里添加所有输入，然后用户可以单击StartNewGroup，然后添加另一组输入等。创建一个在线（提琴手）vue您的应用程序我可以对其进行更改并向您展示。
您能否提供您如何检索数据并将数据发送到后端

标签： javascript vue.js vuejs2

【解决方案1】：

HTML 表单编码 (application/x-www-form-urlencoded) 不支持这样的对象数组。一些后端（Laravel 或 Rails）支持表单数据中的特殊键命名以对复杂对象进行分组，但 Flask 不支持（至少不是开箱即用的）。

我认为最简单的解决方案是 Vue 客户端以所需格式将表单数据作为 JSON 发送，而 Flask 后端将其作为 JSON 接收（即 request.get_json() 而不是 request.form）。

将您的组分解为rows，其中每个row 包含分别绑定到<select>.v-model 和<input>.v-model 的标签和值：

// MyForm.vue template
<fieldset v-for="group in groups" :key="group.id">
  <div v-for="row in group.rows" :key="row.id">
    <select v-model="row.label">...</select>
    <input type="text" v-model="row.value">
  </div>
  <button type="button" @click="addRow(group)">Add Input</button>
</fieldset>

// MyForm.vue script
data() {
  return {
    groups: [
      {
        id: 1,
        rows: [{ id: 1, label: "Name", value: "John Doe" }]
      },
      {
        id: 2,
        rows: [
          { id: 2, label: "Name", value: "Jane Doe" },
          { id: 3, label: "Email", value: "coolkid69@email.com" }
        ]
      },
      {
        id: 3,
        rows: [{ id: 4, label: "Name", value: "Bob Alan" }]
      }
    ]
  };
}

添加submit 方法来发布您的特殊格式数据：

// MyForm.vue script
methods: {
  submit(e) {
    const formData = this.groups.map(group => group.rows.reduce((c, row) => {
      c[row.label] = row.value;
      return c;
    }, {}));

    axios.post(e.target.action, formData);
  }
}

demo

【讨论】：