vue js input form binding from v-for loop data

Question

I am sending a post request from vue, the vue form is created with v-for loop as it is an array of data objects. Within the data objects there is another set of objects with a field. How do i setup the data structure? And how do i pass the data with id into vue data structure since the for loop creates more than 1 object? Appreciate any help here! thank you!

<div v-for="(list, index) in lists.items" :key="list.id">
    <div class="card">
        <div class="card-header">
            {{ list.title }}
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-sm">
                    Select quantity of item: <br>
                    <input type="number" placeholder="Quantity of item">
                </div>
                <div class="col-sm">
                    <div v-for="addon in list.addons">
                        Include addons: <br>
                        <input type="checkbox" :value="addon.id">
                        <label>{{ addon.name }}</label>
                        <input type="number" placeholder="Quantity of addon">
                    </div>
                </div>
                <div class="col-sm">
                    <input type="submit" class="btn btn-primary" value="Buy" @click.prevent="buy(index)">
                </div>
            </div>
        </div>
    </div>
</div>

I need to send

[
    { item_id: id },
    { quantity: quantity },
    [
        [
            { addon_id: id },
            { addon_quantity: quantity }
        ],
        [
            { addon_id: id },
            { addon_quantity: quantity }
        ]
    ]
] 

to back end. the addon array can contain a single object or multiple objects depending on whether they have been selected.

Answer 1

I solved the issue by putting the entire array as an object into the buy function. Other arrays in the same loop will not be affected when I click on the submit for each array.

@click.prevent="buy(list)"

as for the input numbers into the list object, I declared as:

<input type="number" placeholder="Quantity of item" v-model="list.main_quantity">

and the addon loop

<div class="col-sm">
    <div v-for="addon in list.addons">
        Include addons: <br>
        <input type="checkbox" :value="addon.id" v-model="addon.addon_id">
        <label>{{ addon.name }}</label>
        <input type="number" placeholder="Quantity of addon" v-model="addon.quantity">
    </div>
</div>

Answer 2

I assume your list structure is something like that:

list: {
    id: 1,
    title: 'Foo Baah',
    addons: [
        {
            id: 100,
            name: 'Delta'
        },
        {
            id: 101,
            name: 'Bravo'
        },
        {
            id: 102,
            name: 'charlie'
        }
    ]
}

Then, you can handle this data on this way:

function(lists) {
    let tempList = []
    lists.forEach((item) => {
        let tempItem = []

        Object.keys(item).forEach((key) => {
            if (key == 'addons') {
                let tempAddon = []
                item.addons.forEach((addonItem) => {
                    let tempAddonItem = []

                    Object.keys(addonItem).forEach((addonItemKey) => {
                        let tempObject = {}
                        tempObject[addonItemKey] = addonItem[addonItemKey]
                        tempAddonItem.push(tempObject)
                    })
                    tempAddon.push(tempAddonItem)
                })
                tempItem.push(tempAddon)
            } else {
                let tempObject = {}
                tempObject[key] = item[key]
                tempItem.push(tempObject)
            }
        })

        tempList.push(tempItem)
    })

    return tempList
}