One of the features of my code is the ability to create dynamic input and select elements:
<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>
While this setup works well, I face a challenge in organizing the inputs. I'd like to group them together for better clarity. For instance, if there are multiple names and emails, it would be helpful to distinguish whose data belongs to whom when sent to my Flask backend.
Currently, when I add 3 names and 1 email, the data reaches my backend in this format:
Name:['John Smith', 'Jane Doe', 'Bob Alan'], Email:[<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2d21212225272a78770e2b232f2722602d2123">[email protected]</a>]
To improve this, I prefer the data to be structured like this:
{Name:'John Smith'}, {Name:'Jane Doe', Email:'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7d4d8d8dbdcded3818ef7d2dad6dedb99d4d8da">[email protected]</a>'}, {Name:'Bob Alan'}