All docs
V21.2
21.2
21.1
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.

Property Binding in Vue

  • 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

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

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

<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 <DxAjaxRemoteService> object to configure the DashboardControlOptions.ajaxRemoteService property. The following code sets the server’s URL and passes a custom Authorization header from the client:

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

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

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

Tip

DevExtreme Documentation: Property Binding

Vue Documentation: Passing Static or Dynamic Props