Question

我有一个对象数组。每个对象包含一个对象数组。

例如：

wishlists: [
    {
        name: 'wishlist 1',
        id: '123',
        items: [
            {
                image: "foobar.jpg",
                name: "warlock",
                quantity: 1
            },
            {
                image: "foobar1.jpg",
                name: "warlock1",
                quantity: 2
            }
        ]
    },
    {
        name: 'wishlist 2',
        id: '1422',
        items: [
            {
                image: "foobar.jpg",
                name: "warlock",
                quantity: 7
            },
            {
                image: "foobar1.jpg",
                name: "warlock1",
                quantity: 2
            }
        ]
    }
]

我正在循环中使用vue可拖动来呈现每个列表。

 <div v-for="(list, index) in wishlists">
     <draggable v-model="list.items" :key="list._id" :options="{group:'wishes'}" class="dropZone" @change="checkMove">
</div>

我的checkMove方法只是记录更改事件。

{added: {…}}
added:
element:
image: "foobar.jpg"
name: "Warlock"
quantity: 1
 ...
newIndex: 0
 ...
{removed: {…}}
removed: {element: {…}, oldIndex: 0}
 ...
{moved: {…}}
moved: {element: {…}, oldIndex: 1, newIndex: 0}

我需要在每个操作上触发POST。我不想在每次事件时都将整个根愿望清单数组发送回服务器，因为那太麻烦了！我只需要发布已更改的内容即可。

通过@change事件，我看到我能够获取已移动的对象-以及oldIndex位置（在旧列表中）和newIndex位置（在新列表中）。但是，我没有被告知有关名单的任何信息。我需要知道它来自哪个列表，它落在哪个列表上。

有什么方法可以获取此信息？如果我可以获取心愿单的ID以及newIndex和oldIndex等-那么我可以将此信息发布回服务器，并更新数据库...

我参加了所有活动，看起来似乎没有任何有关该列表的信息。

Answer 1

<draggable v-model="list.items" :key="list._id" :options="{group:'wishes'}" ... @end="checkMove">

@end给我列出列表，从列表中，oldIndex，newIndex ... ugghhh ...我确定我尝试过。它没有给我该项目-但是我有索引，所以我只用它来按索引进行引用。

Vue可拖放

1 个答案: