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