Как правильно реализовать drag and drop?

Question

[Konstantin Malyarov]

Есть библиотека.
Есть список операций:

<draggable v-model="operations" :options="{group:'operations'}">
                            <div v-for="operation in operations" :key="operation.id" class="border rounded"
                                 style="margin: 1px">
                                Дата: <b>{>operation.date_operation<}</b>
                                Фамилия: <b>{>operation.last_name<}</b>
                                <br>Диагноз: <b>{>operation.diagnosis<}</b>
                                <br>Название операции: <b>{>operation.operation_name<}</b>
                            </div>
                        </draggable>

Есть даты с операционными:

<b-tabs>
                            <b-tab v-for="(rooms, day) in period" :title="day">
                                <div v-for="room in rooms">
                                    <draggable v-model="room" :options="{group:'operations'}" class="bg-dark"
                                               style="height: 2.5px; padding: 5px; margin: 1px">
                                        <div v-for="operation in room">
                                            {>operation<}
                                        </div>
                                    </draggable>
                                </div>
                            </b-tab>
                        </b-tabs>

При перетаскивании происходит исчезает item.
До:

После:

Есть подозрение что проблемы с этим участком кода:

<div v-for="operation in room">
                                            {>operation<}
                                        </div>

Answer 1

[0xD34F]

Есть подозрение что...

Не надо подозревать - надо открыть консоль, и посмотреть, что там происходит. А именно, вы должны были получить предупреждение о том, что шаблон скомпилирован с ошибкой: "You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because... бла-бла-бла".

Добавьте индекс (например, room_index) в v-for="room in rooms".

И замените v-model="room" на v-model="period[day][room_index]".

Comments

[Konstantin Malyarov]

В консоли пусто. Попробую.