Vue Draggable to and from

Question

I have an array of objects. Each object contains an array of objects.

eg:

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

I'm using vue draggable within a loop to render each lists.

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

My checkMove method simply logs the change event.

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

I need to trigger a POST upon each action. I don't want to send the entire root wishlists array back to the server on every event, as that would be nuts! I only need to POST what has changed.

With the @change event, I see I am able to get the object that has been moved - along with its oldIndex position (in the old list), and its newIndex position (in the new list). However, I am not told anything about the lists. I need to know which list it came from, and which list it landed on.

Is there any way to obtain this information? If I can get the ID of the wishlist along with the newIndex and oldIndex etc - then I can post this info back to the server, and update the db...

I've played with every event, and it doesn't look like any give any information about the list.

Answer 1

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

@end gives me to list, from list, oldIndex, newIndex... ugghhh... I was certain I tried it. It doesn't give me the item - but I have the index, so i just use that to reference by index.