У меня есть 2 динамических c массива объектов. 1 для status
и 1 для tickets
.
Содержимое объекта:
//Status object | status_list
[
{id: 1, name: 'UN ASSIGNED'},
{id: 2, name: 'TO DO'},
{id: 3, name: 'IN PROGRESS'},
{id: 4, name: 'DONE'}
]
//Tickets object | tickets_array
[
{status_id: 1, data:{id: 1, name: 'Ticket 1', stat_id: 1} },
{status_id: 1, data:{id: 3, name: 'Ticket 3', stat_id: 1} },
{status_id: 2, data:{id: 6, name: 'Ticket 6', stat_id: 2} }
]
Итак, пользовательский интерфейс выглядит так ...
| UN ASSIGNED | | TO DO | | IN PROGRESS | | DONE |
--------------- ------------- ----------------- ------------
| TICKET 1 | | TICKET 6 | | | | |
| TICKET 1 | | | | | | |
| | | | | | | |
Теперь я могу свободно перетаскивать от UN ASSIGNED
до TO DO
и аналогично. Однако я не могу ничего перетащить в IN PROGRESS
и DONE
. Причина в том, что компонент <draggable>
имеет свойство, называемое :list="ticket_array"
, и мы знаем, что идентификатор IN PROGRESS
и DONE
не существует в ticket_array
.
Вот как я его отобразил. ..
<div v-for="(status, index) in status_list" :key="index">
<div class="status_box_content">
<div class="status_box_header">
<h2 dir="auto">{{status.name}}</h2>
<div class="_draggable">
<div v-for="(cated_tix, index2) in tickets_array" :key="index2">
<template v-if="index == index2 && cated_tix.status_id == status.id">
<draggable class="dragArea" :list="list_array[index].data" group="people" @change="_transferTickets">
<vs-card v-for="(tix,tix_index) in cated_tix.data" :key="tix.id">
{{tix.name}}
</vs-card>
</draggable>
</template>
</div>
</div>
</div>
</div>
</div>
Конечно, в рендеринге нет проблем, но проблема в том, что я не могу ничего перетащить в пустые категории. Кто-нибудь?