TaskBoard - External Mode

Render store-owned item arrays with items while applying emitted changes outside TaskBoard.

#Usage

import { TaskBoard } from '@primeui/vue-taskboard';
<TaskBoard.Root :items="tasks" data-key="id" column-field="columnId" @card-move="onCardMove" @card-reorder="onCardReorder" @card-update="onCardUpdate" @card-delete="onCardDelete">
    <!-- TaskBoard parts -->
</TaskBoard.Root>

Use :items when a store, server cache, or undo stack owns item mutations. TaskBoard reads the array and emits events, but the app decides when to update the source.

#External Store Flow

import type { TaskBoardCardMovePayload } from '@primeui/vue-taskboard';

function onCardMove(payload: TaskBoardCardMovePayload) {
    taskStore.move({
        id: payload.card.id,
        columnId: payload.newColumnId,
        index: payload.newIndex,
        swimlaneId: payload.newSwimlaneId
    });
}

The handler can persist the move, reject it, queue it, or replace the array after server confirmation.

#Binding Modes

ModeRuntime writeApp responsibility
v-model:tasksTaskBoard replaces the array for supported operations.Persist changes if needed.
:itemsTaskBoard does not replace the array.Apply every accepted movement, create, update, delete, or reorder change.

Filtering, sorting, selection, collapse state, scrolling, and focus can still be driven by TaskBoard runtime state. Mirror their events only when those values belong in the URL, a toolbar, or an external store.

#Events To Handle

EventExternal-mode use
@card-moveMove a card between columns or swimlanes.
@card-reorderPersist a position change in the same column.
@card-create, @card-update, @card-deleteApply changes requested by app-owned controls.
@selection-changeMirror selection in a toolbar or route state.

#Method Caveat

Exposed methods such as addTask, updateTask, and moveTask use the same mapped data-key, column-field, and swimlane-field contract as drag actions. With :items, treat their emitted events as requests and update the store yourself.

#Store-Owned Items

The external-mode sample keeps the item array outside TaskBoard and updates the store from movement events.

Loading Demo...