How to group form data with Vue

Question

I have a bit of code that creates a dynamic input and select:

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

This works great, but my issue is that I would like to somehow group the inputs. If there are multiple names and multiple emails, when it gets sent to my Flask backend, I can see whose data is whose.

Currently, if I were to add 3 names and 1 email, it arrives at my backend like this:

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

As you can see, I can't tell who owns the email. I'd prefer it like this:

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

Add a `button` that says `StartFormGroup` and then there you add all inputs then the user could click on `StartNewGroup` and then add another group of input etc. Create an online(fiddler) vue of your application i could make a change to it and show you. — Alen.Toma, Feb 22 '19 at 01:49
can you also provide how you retrieve data and send data to backend — ﾃﾞﾋﾞｯﾄ, Feb 22 '19 at 02:10

tony19 · Accepted Answer · 2019-02-22T12:47:39.557

The HTML form encoding (application/x-www-form-urlencoded) doesn't support arrays of objects like that. Some backends (Laravel or Rails) support special key-naming in the form data to group complex objects, but Flask does not (at least not out of the box).

I think the easiest solution is for the Vue client to send the form data as JSON in the desired format, and the Flask backend to receive it as JSON (i.e., request.get_json() instead of request.form).

Break up your groups into rows, where each row contains a label and value respectively bound to a <select>.v-model and <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" }]
      }
    ]
  };
}

Add a submit method to post your specially formatted data:

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

How to group form data with Vue

1 Answers1