Vue Перетаскивание туда и обратно

У меня есть массив объектов. Каждый объект содержит массив объектов.

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

Я использую vue draggable в цикле для отображения каждого списка.

 <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 при каждом действии. Я не хочу отправлять весь массив корневых списков желаний обратно на сервер при каждом событии, так как это было бы безумием! Мне нужно только POST, что изменилось.

Я вижу, что с помощью события @change я могу получить объект, который был перемещен, вместе с его позицией oldIndex (в старом списке) и его позицией newIndex (в новом списке). Однако мне ничего не говорят о списках. Мне нужно знать, из какого списка оно пришло и в какой список попало.

Есть ли способ получить эту информацию? Если я могу получить идентификатор списка желаний вместе с newIndex и oldIndex и т. д., то я могу отправить эту информацию обратно на сервер и обновить базу данных...

Я играл с каждым событием, и не похоже, чтобы кто-то давал какую-либо информацию о списке.


person Rob    schedule 21.09.2018    source источник


Ответы (1)


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

@end дает мне список, из списка, oldIndex, newIndex... угу... Я был уверен, что пробовал. Он не дает мне элемент, но у меня есть индекс, поэтому я просто использую его для ссылки по индексу.

person Rob    schedule 21.09.2018