TaskBoard - CRUD Operations

#Usage

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

<TaskBoard.Root v-model:tasks="tasks" data-key="id" column-field="columnId" context-menu @card-activate="onCardActivate" @card-context-menu="onCardContextMenu" @card-create="onCardCreate" @card-update="onCardUpdate" @card-delete="onCardDelete">
    <!-- TaskBoard parts -->
</TaskBoard.Root>

CRUD events describe accepted item changes in v-model:tasks mode. Use them to persist to a store or call an API after TaskBoard updates the model. With :items, treat the same events as requests and apply the accepted change to the store.

#CRUD Flow

TaskBoard owns card placement, selection, movement, and mutation events. The form itself belongs to the app. Open a dialog, drawer, route panel, or inline inspector from @card-activate, then call the exposed addTask, updateTask, or removeTask methods when the user saves.

import type { TaskBoardExpose, TaskBoardItem } from '@primeui/vue-taskboard';

const board = ref<TaskBoardExpose | null>(null);

function saveCard(card: TaskBoardItem, mode: 'create' | 'edit') {
    if (mode === 'create') {
        board.value?.addTask(card);
    } else {
        board.value?.updateTask(card);
    }
}

function deleteCard(id: string) {
    board.value?.removeTask(id);
}

Context menus follow the same rule. Set context-menu, listen to @card-context-menu, and open the menu component the app already uses. Product actions such as edit, duplicate, archive, assign, or delete should live in that app-owned menu and call TaskBoard methods or store actions when they commit.

#Access Rules

Use access.canCreate, access.canEdit, and access.canDelete to disable unavailable actions in the dialog or context-menu UI you render.

#Payloads

#Create Update Delete

The CRUD sample combines per-column create buttons, app-owned context-menu actions, and a dialog that saves through TaskBoard exposed methods.

#Related Docs

• Permissions
• External Mode
• Events