Skip to main content
All docs
V22.1

Access a DashboardControl Instance in Vue

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:

<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>