TaskBoard - Events
Reference TaskBoard emitted events and payload fields for movement, selection, activation, editing, layout, menu, and scrolling.
#Movement Events
| Vue listener | Payload |
|---|---|
@card-move | { card, oldColumnId, newColumnId, oldIndex, newIndex, oldSwimlaneId, newSwimlaneId } |
@card-reorder | { card, columnValue, oldIndex, newIndex } |
@drag-start | { card, column, jsEvent } where jsEvent can be mouse or touch. |
@drag-end | { card, oldColumn, newColumn, oldIndex, newIndex } |
@drag-cancel | { card, column } |
@card-drop-blocked | { task, targetColumn, reason, message, failedFields } |
#Selection Events
| Vue listener | Payload |
|---|---|
@card-click | { card, column, jsEvent } |
@card-dblclick | { card, column, jsEvent } |
@card-activate | { card, column, origin } |
@card-select | { card, selected } |
@selection-change | { selectedIds, cards } |
#Editing Events
| Vue listener | Payload |
|---|---|
@card-create | { card, column } |
@card-update | { card, oldCard } |
@card-delete | { card, column } |
#Layout and Menu Events
| Vue listener | Payload |
|---|---|
@column-collapse | { column, collapsed } |
@column-reorder | { columns, oldIndex, newIndex } |
@swimlane-collapse | { swimlane, collapsed } |
@card-context-menu | { card, column, position, jsEvent } |
#Scrolling
Scrolling is imperative, not event-based. Call the exposed methods scrollToColumn(id) and scrollToCard(id) from a template ref — see the API reference. There are no @scroll-to-* events.
@card-reorder is emitted for same-column reordering. @card-move is emitted for every accepted move, including same-column reorder and cross-column or cross-swimlane moves, so persistence handlers often listen to @card-move first and use @card-reorder for reorder-specific UI. Pointer drag and keyboard moves use the same accepted and blocked event paths.
Move indexes are scoped to the list that the user actually moved within. Normal boards use the source and target column lists. Swimlane boards use the source and target swimlane cells, with oldSwimlaneId and newSwimlaneId included when swimlane-field is configured.
@card-activate is emitted when a focused card is opened with keyboard Enter or when a pointer gesture intentionally activates the card. Use it to open an app-owned dialog, side panel, route, or inspector.
#Naming Notes
Vue templates use kebab-case listeners. The source emits camel-case names such as cardMove, selectionChange, and cardContextMenu, which Vue receives as @card-move, @selection-change, and @card-context-menu.