vuejs 입력 양식 바인딩(v-for 루프 데이터)

vuejs 입력 양식 바인딩(v-for 루프 데이터)

vue에서 post request를 보냅니다. vue for loop은 데이터 객체의 배열이기 때문에 v-for loop로 생성됩니다.데이터 개체 내에는 필드가 있는 다른 개체 집합이 있습니다.데이터 구조를 어떻게 설정합니까?그리고 for 루프가 하나 이상의 객체를 만들기 때문에 ID를 가진 데이터를 vue 데이터 구조로 전달하려면 어떻게 해야 합니까?도움을 주셔서 감사합니다! 감사합니다!

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

추가 기능 배열은 선택되었는지 여부에 따라 단일 개체 또는 여러 개체를 포함할 수 있습니다.

저는 전체 어레이를 개체로 구매 기능에 넣어 문제를 해결했습니다.각 배열에 대한 제출을 클릭해도 같은 루프에 있는 다른 배열은 영향을 받지 않습니다.

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

당신의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
}

언급URL : https://stackoverflow.com/questions/54406298/vue-js-input-form-binding-from-v-for-loop-data