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.

Are you editing the addon info already? Could you edit your post, showing us the data that you send to your backend? And show the function that you use to send. — Raphael Parreira
– Raphael Parreira, Commented Jan 28, 2019 at 16:33
i am not edditing the addon info, it is a checkbox for customers to select if they want addons. I have not sent anything to backend yet, that is the axios part which i am okay with. the problem i have is to construct the data structure to send. — NewProgrammer
– NewProgrammer, Commented Jan 28, 2019 at 16:40

NewProgrammer · Accepted Answer · 2019-01-29 01:39:14Z

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>

answered Jan 29, 2019 at 1:39

NewProgrammer

2951 gold badge6 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raphael Parreira · Accepted Answer · 2019-01-28 17:09:38Z

0

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
}

answered Jan 28, 2019 at 17:09

Raphael Parreira

4684 silver badges14 bronze badges

2 Comments

NewProgrammer Over a year ago

Hi Raphael, thank you for your time trying to help me. how will you pass the input number parameter of the main quantity & addon quantity? i am not aware of any method to do so. I have the index together with the list in the v-for loop to differentiate the different arrays when the submit button is pressed.

Raphael Parreira Over a year ago

I didn't realize the problem that you had. I thought that you need to handle your data to send to your API. I hope my answer helped you.

Collectives™ on Stack Overflow

vue js input form binding from v-for loop data

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related