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.
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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.