Data and Value Binding

The DropDownList enables you to configure the predefined list of options by setting its data property and the selected value by setting its value property.

Data Binding

To bind the DropDownList to data, use the data property of the component.

The data property accepts both:

Datasets of Objects

If the DropDownList is bound to a dataset of objects, the value of the component will correspond to the selected object. To implement the approach, set the textField property.

By default, the DropDownList compares the items by reference. To specify a field from the data object which will be used for the comparison, utilize the dataItemKey property. The dataItemKey property is useful when the reference to the selected item which is configured in the value or defaultValue property do not match its corresponding item from the data collection. If dataItemKey is not set and the references in data and value do not correspond, the selected item will not be highlighted in the drop-down list.

<div id="vueapp" class="vue-app">
    <div>
            <div class="example-config">
                Selected Value: {{value}}
            </div>
            <div :style="{ display: 'inline-block' }">
            value and change
            <br />
            <dropdownlist
                :data-items="sports"
                :text-field="'text'"
                :data-item-key="'id'"
                :value="value"
                @change="handleChange"
            >
            </dropdownlist>
            </div>
            <div :style="{ display: 'inline-block' }">
            v-model
            <br />
            <dropdownlist
                :data-items="sports"
                :text-field="'text'"
                :data-item-key="'id'"
                v-model="value"
            >
            </dropdownlist>
            </div>
    </div>
</div>
import { DropDownList } from '@progress/kendo-vue-dropdowns';
Vue.component('dropdownlist', DropDownList);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            // Since the reference of the initial value is not from the 'sports' collection,
            // 'dataItemKey' have to be set.
             value: { text: 'Football', id: 2 },
             sports: [
                { text: 'Basketball', id: 1 },
                { text: 'Football', id: 2 },
                { text: 'Tennis', id: 3 },
                { text: 'Volleyball', id: 4 }
            ]
        };
    },
    methods: {
        handleChange (event) {
            this.value= event.value;
        }
    }
});

Arrays of Primitive Values

The following example demonstrates how to bind the DropDownList to an array of primitive values.

<div id="vueapp" class="vue-app">
    <div>
            <div class="example-config">
                Selected Value: {{value}}
            </div>
            <div :style="{ display: 'inline-block' }">
            value and change
            <br />
            <dropdownlist
                :data-items="sizes"
                :value="value"
                @change="handleChange"
            >
            </dropdownlist>
            </div>
            <div :style="{ display: 'inline-block' }">
            v-model
            <br />
            <dropdownlist
                :data-items="sizes"
                v-model="value"
            >
            </dropdownlist>
            </div>
    </div>
</div>
import Vue from 'vue';
import { DropDownList } from '@progress/kendo-vue-dropdowns';

Vue.component('dropdownlist', DropDownList);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            // Since the reference of the initial value is not from the 'sizes' collection,
            // 'dataItemKey' have to be set.
             value: null,
             sizes: [ "X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large" ]
        };
    },
    methods: {
        handleChange (event) {
            this.value= event.value;
        }
    }
});

Value Binding

If you want to render the selected value you can use v-model or to use the value property of the DropDownList. If you set the value through the value property, hook up to the change event and manually update the value of the value property.

In this article