Как сгруппировать данные формы с помощью Vue

Question

У меня есть немного кода, который создает динамический ввод, и выберите:

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

Answer 1

Кодировка HTML-формы (application/x-www-form-urlencoded) не поддерживает массивы подобных объектов.Некоторые бэкэнды ( Laravel или Rails ) поддерживают специальные именования ключей в данных формы для группировки сложных объектов, но Flask этого не делает (по крайней мере, не из коробки).

Я думаю, что самым простым решением для клиента Vue является отправка данных формы в виде JSON в нужном формате, а бэкэнда Flask для получения их в виде JSON (т. Е. request.get_json() вместо request.form).

1. Разбейте свои группы на 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" }]
         }
       ]
     };
   }
   

2. Добавьте метод 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