I'm trying to figure out the proper way to collect "variable" personalized data on a product. The product has these personalized fields defined:
"personalization": [
{
"id": 234,
"maxlength": "128",
"prompt": "Text Line 1 (12 character limit)",
"required": "1"
},
{
"id": 235,
"maxlength": "128",
"prompt": "Text Line 2 (12 character limit)",
"required": "1"
}
],
Building a small form to collect that input would be fairly straightforward, except that personalized data can be different for each quantity. So if I order 2 of this item, it can have personalization:
FIRST ITEM
Text Line 1: Yarr
Text line 2: Matey
SECOND ITEM
Text Line 1: Swab
Text line 2: The poop deck
So basically the set of personalized fields needs to repeat for each quantity.
I've got the form built using a computed property:
personalizedForm: computed('quantity', function() {
let q = get(this, 'quantity');
let persform = [];
for (let i = 0; i < q; i++) {
persForm.push(get(this, 'model.personalization'));
}
return persForm;
}),
with this template:
Item
<ul>
<li class="label"></li>
<li class="field"></li>
</ul>
And that shows a form like the image below. So that's great. But I just can't figure out exactly what to bind each form field to, and how. I imagine the "mut" and "get" helpers are the ticket, but I don't even know how to set up the object to save the data to.
Any help is appreciated!
Aucun commentaire:
Enregistrer un commentaire