# Data and Value Binding

The DropDownList enables you to configure the predefined list of options by setting its [`dataItems`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdownlistprops#dataitems) property and the selected value by setting its [`value`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdownlistprops#value) property.

## Data Binding

To bind the DropDownList to data, use the [`dataItems`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdownlistprops#dataitems) property of the component.

The `data-items` property accepts both:

* [Datasets of objects](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdownlist/binding#datasets-of-objects), and
* [Arrays of primitive values](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdownlist/binding#arrays-of-primitive-values).

### Datasets of Objects

When you bind the DropDownList to a dataset of objects, the component's value corresponds to the selected object. To implement the approach, set the  [`textField`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdownlistprops#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, use the [`dataItemKey`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdownlistprops#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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dropdowns/dropdownlist/binding/source.txt)

### Arrays of Primitive Values

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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dropdowns/dropdownlist/primitive-value/source.txt)

## Value Binding

### Binding to Object Value

If you want to render the selected value you can use `v-model` or to use the [`value`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdownlistprops#value) property of the DropDownList. If you set the value through the `value` property, hook up to the [`change`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdownlistprops#onchange) event and manually update the value of the `value` property.

In the following example, the `value` of the `DropDownList` is a whole object(`{ text: 'Football', id: 2 }`) that holds the selected data item.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dropdowns/dropdownlist/value-binding/source.txt)

### Binding to Primitive Values from Object Fields

If the `DropDownList` is bound to a dataset of objects and the [valuePrimitive](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdownlistprops#valueprimitive) property is set to true, the value of the component will be extracted from the [valueField](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdownlistprops#valuefield) of the objects.

In the following example, the `value` of the component is "**2**" because its `valueField` prop is set to **id**. In this scenario, the value of the **DropDownList** is associated with this data item: `{ text: 'Football', id: 2 }`.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dropdowns/dropdownlist/value-primitive/source.txt)

## Suggested Links

* [API Reference of the DropDownList](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdownlistprops)
* [Controlled Components in Vue](https://vuejs.org/docs/forms.html#controlled-components)