vue js привязка формы ввода из данных цикла v-for

Question

Я отправляю запрос на отправку из vue, форма vue создается с помощью цикла v-for, поскольку он представляет собой массив объектов данных.Внутри объектов данных есть еще один набор объектов с полем.Как мне настроить структуру данных?И как мне передать данные с идентификатором в структуру данных vue, поскольку цикл for создает более 1 объекта?Цените любую помощь здесь!спасибо!

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

Мне нужно отправить

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

на задний план.Массив аддонов может содержать один объект или несколько объектов в зависимости от того, были ли они выбраны.

Answer 1

Я решил проблему, поместив весь массив как объект в функцию покупки.Другие массивы в том же цикле не будут затронуты, когда я нажму на кнопку отправки для каждого массива.

@click.prevent="buy(list)"

как и для ввода чисел в объект списка, я объявил как:

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

и петля аддонов

<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

Я предполагаю, что ваша list структура выглядит примерно так:

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

Затем вы можете обработать эти данные следующим образом:

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
}