Access a DashboardControl Instance in Vue

Apr 20, 2023

The sample below shows how you can access properties and call methods of a DashboardControl in a Vue application.

Create a ref and use the $refs property to obtain the component. You can then use the instance property to access the underlying DashboardControl and its members.

The following code calls the underlying control’s reloadData method when you click the ‘Reload Data’ button:

App.vue

vue

<template>
    <div>
        <DxButton
            @click="reloadData"
            text="Reload Data"
        />
        <DxDashboardControl 
            style="height:900px; display: 'block'; width: '100%';"
            endpoint="https://demos.devexpress.com/services/dashboard/api"
            workingMode="Designer"
            :ref="dashboardControlRefKey"
        />
    </div>  
</template>

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

const dashboardControlRefKey = "dashboard-control";

export default {
    components: {
        DxDashboardControl,
        DxButton
    },
    data: function() {
        return {
            dashboardControlRefKey
        };
    },
    methods: {
        reloadData() {
          this.dashboardControlInstance.reloadData();
        }
    },
    computed: {
      dashboardControlInstance() {
          return this.$refs[dashboardControlRefKey].instance;
      }
    }
}
</script>