Property Binding in Vue

• Jun 02, 2023
• 2 minutes to read

The Dashboard component for Vue uses options listed in the DashboardControlOptions class.

You can dynamically bind the control’s options.

One-Way Property Binding

Changes in workingModeProperty are propagated to the DashboardControl’s workingMode property, but not the other way:

View Example

App.vue

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

Two-Way Property Binding

Changes in workingModeProperty are propagated to the DashboardControl’s workingMode property and vice versa:

App.vue

<template>
    <div>
        <DxDashboardControl 
            style="height:345px; display: 'block'; width: '100%';"
            endpoint="https://demos.devexpress.com/services/dashboard/api"
            v-model:workingMode="workingModeProperty"
        />
    </div>  
</template>

Properties of the Object Type

Use nested configuration components to access extensions. The following example configures the Data Inspector extension’s options:

App.vue

<template>
    <div>
        <DxDashboardControl 
            style="height:900px; display: 'block'; width: '100%';"
            endpoint="http://localhost:5000/api/dashboard">
              <DxExtensions>
                <DxDataInspector 
                    :allowInspectAggregatedData="true"
                    :allowInspectRawData="true">
                </DxDataInspector>
            </DxExtensions>
        </DxDashboardControl>
    </div>  
</template>

<script>
import { DxDashboardControl, DxExtensions, DxDataInspector } from 'devexpress-dashboard-vue/dashboard-control';

export default {
    components: {
        DxDashboardControl,
        DxExtensions, 
        DxDataInspector
    }
}
</script>

Tip

See Also: Modify Extensions

Use the <DxFetchRemoteService> object to configure the DashboardControlOptions.fetchRemoteService property. The following code sets the server’s URL and passes a custom Authorization header from the client:

App.vue

<template>
    <div>
        <DxDashboardControl 
            style="height:900px; display: 'block'; width: '100%';"
            endpoint="http://localhost:5000/api/dashboard">
            <DxFetchRemoteService
                :headers="{ 'Authorization': 'AuthToken123' }">
            </DxFetchRemoteService>
        </DxDashboardControl>
    </div>  
</template>

<script>
import { DxDashboardControl, DxFetchRemoteService } from 'devexpress-dashboard-vue/dashboard-control';

export default {
    components: {
        DxDashboardControl,
        DxFetchRemoteService
    }
}
</script>

Tip

DevExtreme Documentation: Property Binding

Vue Documentation: Passing Static or Dynamic Props