Vue DropDownBox - Overview

The DropDownBox is a UI component 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 UI component configuration requires specifying a dataSource, value and contentTemplate. The following code adds the DropDownBox to your page:

App.vue
  • <template>
  • <div>
  • <DxDropDownBox
  • v-model:value="selectedFruit"
  • v-model:opened="isDropDownBoxOpened"
  • :data-source="dataSource">
  • <DxList
  • :data-source="dataSource"
  • selection-mode="single"
  • @selection-changed="changeDropDownBoxValue($event)">
  • </DxList>
  • </DxDropDownBox>
  • </div>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • 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 property.
  • displayExpr
    The data field whose value is displayed in the input field of the UI component.
App.vue
  • <template>
  • <div>
  • <DxDropDownBox
  • v-model:value="selectedValue"
  • v-model:opened="isDropDownBoxOpened"
  • :data-source="customerDataSource"
  • value-expr="ID"
  • display-expr="companyName">
  • <DxDataGrid
  • :data-source="customerDataSource"
  • :columns="['companyName', 'city', 'phone']"
  • :height="265"
  • v-model:selected-row-keys="selectedCustomers"
  • @selection-changed="changeDropDownBoxValue">
  • <DxSelection mode="single"/>
  • </DxDataGrid>
  • </DxDropDownBox>
  • </div>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • 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" },
  • { ID: 2, companyName: "ElectrixMax", city: "Naperville", phone: "(630)438-7800" },
  • // ...
  • ];
  • return {
  • customerDataSource: new ArrayStore({
  • data: customers,
  • key: "ID"
  • }),
  • isDropDownBoxOpened: false,
  • selectedCustomers: [customers[0].ID],
  • selectedValue: customers[0].ID
  • }
  • },
  • methods: {
  • changeDropDownBoxValue(e) {
  • this.selectedValue = this.selectedCustomers[0];
  • this.isDropDownBoxOpened = false;
  • }
  • }
  • }
  • </script>
See Also