Vuejs Draggable + Vuex + длинный список - PullRequest
Новая
       8

Vuejs Draggable + Vuex + длинный список

0 голосов
/ 06 сентября 2018

У меня есть приложение для управления проектами для моей компании. Я хочу создать похожий на trello интерфейс для многих проектов (по одной строке для каждого проекта). Каждый столбец представляет собой список различных уровней приоритета (удержание, активный, срочный): 

<div v-for="project in open_projects"    
    <draggable :list="hold_tasks">
        <div v-for="task in hold_tasks">
            {{ task.title }}
        </div>
    </draggable>
    <draggable :list="active_tasks">
        <div v-for="task in active_tasks">
            {{ task.title }}
        </div>
    </draggable>
    <draggable :list="urgent_tasks">
        <div v-for="task in urgent_tasks">
            {{ task.title }}
        </div>
    </draggable>
</div>

Если я сделаю массивы локальными (данные), перетаскивание будет работать очень быстро и без проблем, но обновления из-за пределов компонента в списке - это боль. Я должен сообщить, что получено обновление, и обновить локальные данные вручную.

Если я использую вычисленные свойства, он отлично работает с обновлениями, но с большой задержкой, пока vuejs тикает.

Существует ли простой способ лучше синхронизировать vuex и локальные данные или ускорить вычисляемое свойство?

Я также хочу упомянуть, что не могу создать отдельные массивы для каждой комбинации проекта / приоритета таким образом, чтобы это работало для перетаскивания. Я пытался создать массивы, такие как задачи [приоритет] [проект_идентификатор], и он ничего не отображал, поэтому вместо этого я выполняю большую фильтрацию. Список также довольно длинный. Несколько сотен предметов.

...