DevExtreme Vue - Overview

The DropDownBox is a widget that consists of a text field, which displays the current value, and a drop-down field, which can contain any UI element.

View Demo

The simplest widget configuration requires specifying a dataSource, value and contentTemplate. The following code adds the DropDownBox to your page:

App.vue
  • <template>
  • <div>
  • <DxDropDownBox
  • :value.sync="selectedFruit"
  • :opened.sync="isDropDownBoxOpened"
  • :data-source="dataSource">
  • <DxList
  • :data-source="dataSource"
  • selection-mode="single"
  • @selection-changed="changeDropDownBoxValue($event)">
  • </DxList>
  • </DxDropDownBox>
  • </div>
  • </template>
  •  
  • <script>
  • import DxDropDownBox from "devextreme-vue/drop-down-box";
  • import DxList from "devextreme-vue/list";
  •  
  • export default {
  • components: {
  • DxDropDownBox,
  • DxList
  • },
  • data() {
  • const fruits = ["Apples", "Oranges", "Lemons", "Pears", "Pineapples"];
  • return {
  • dataSource: fruits,
  • isDropDownBoxOpened: false,
  • selectedFruit: fruits[0]
  • }
  • },
  • methods: {
  • changeDropDownBoxValue(e) {
  • this.selectedFruit = e.addedItems[0];
  • this.isDropDownBoxOpened = false;
  • }
  • }
  • }
  • </script>

If your data is an array of objects, specify:

  • valueExpr
    The data field whose value is written into the value option.
  • displayExpr
    The data field whose value is displayed in the input field of the widget.
App.vue
  • <template>
  • <div>
  • <DxDropDownBox
  • :value.sync="selectedCustomers"
  • :opened.sync="isDropDownBoxOpened"
  • :data-source="customerDataSource"
  • value-expr="ID"
  • display-expr="companyName">
  • <DxDataGrid
  • :data-source="customerDataSource"
  • :columns="['companyName', 'city', 'phone']"
  • :height="265"
  • :selected-row-keys.sync="selectedCustomers"
  • @selection-changed="closeDropDownBox($event)">
  • <DxSelection mode="single"/>
  • </DxDataGrid>
  • </DxDropDownBox>
  • </div>
  • </template>
  •  
  • <script>
  • import DxDropDownBox from "devextreme-vue/drop-down-box";
  • import { DxDataGrid, DxSelection } from "devextreme-vue/data-grid";
  • import ArrayStore from "devextreme/data/array_store";
  •  
  • export default {
  • components: {
  • DxDropDownBox,
  • DxDataGrid,
  • DxSelection
  • },
  • data() {
  • const customers = [
  • { ID: 1, companyName: "Premier Buy", city: "Dallas", phone: "(233)2123-11" },
  • // ...
  • ];
  • return {
  • customerDataSource: new ArrayStore({
  • data: customers,
  • key: "ID"
  • }),
  • isDropDownBoxOpened: false,
  • selectedCustomers: [customers[0].ID]
  • }
  • },
  • methods: {
  • closeDropDownBox(e) {
  • this.isDropDownBoxOpened = false;
  • }
  • }
  • }
  • </script>
See Also