Bryntum TaskBoard events in Vue

The Bryntum TaskBoard events are passed up to the Vue wrapper which makes it possible to listen to them the standard Vue way.

Listening to events

The following code demonstrates listening to the taskClick event:

Html:

<template>
    <div>
        <bryntum-task-board
            ref="taskboard"
            @taskclick="onTaskClick"
        />
    </div>
</template>

<script>

import { BryntumTaskBoard } from "@bryntum/taskboard-vue";

export default {

    name: "TaskBoard App",

    components: { BryntumTaskBoard },

    methods : {
        onTaskClick() {
            // Do something
        }
   }
}
</script>

Please note that we prefix the capitalized event name with the on keyword and that we pass $event as the argument to the listener.

Preventable events

By returning false from a listener for an event documented as preventable the action that would otherwise be executed after the event is prevented. These events names are usually prefixed with before.

For example:

<template>
    <div>
        <bryntum-task-board
            ref="taskboard"
            @beforetaskedit="onBeforeTaskEdit"
        />
    </div>
</template>

<script>

import { BryntumTaskBoard } from "@bryntum/taskboard-vue";

export default {

    name: "TaskBoard App",

    components: { BryntumTaskBoard },

    methods : {
        onBeforeTaskEdit() {
            if (someCondition) {
                return false;
            }
        }
   }
}
</script>