All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Handle Events

Use the @ syntax to handle an event.

The following code handles the onDashboardInitialized event and shows the dashboard identifier in a toast message:

<template>
    <div>
        <DxDashboardControl 
            style="height:345px; display: 'block'; width: '100%';"
            endpoint="https://demos.devexpress.com/services/dashboard/api"
            workingMode="Designer"            
            @dashboardInitialized="onDashboardInitialized"
        />
    </div>  
</template>

<script>
import DxButton from 'devextreme-vue/button';
import { DxDashboardControl } from 'devexpress-dashboard-vue';
import notify from "devextreme/ui/notify";

export default {
    components: {
        DxDashboardControl,
        DxButton
    },
    methods: {
        onDashboardInitialized: function(args) {
          notify(args.dashboardId);
        }
    }
}
</script>
TIP

DevExtreme Documentation: Event Handling

Vue Documentation: Event Handling