Question

我正在从vue发送发布请求，由于vue是数据对象数组，因此v-for循环创建了vue表单。在数据对象中，还有另一组带有字段的对象。如何设置数据结构？并且由于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 }
        ]
    ]
]

到后端。插件数组可以包含单个对象，也可以包含多个对象，具体取决于是否已选择它们。

Answer 1

我认为您的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
}

Answer 2

我通过将整个数组作为对象放入buy函数来解决了这个问题。当我单击每个数组的提交时，同一循环中的其他数组将不会受到影响。

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

v-for循环数据中的vue js输入表单绑定

2 个答案: