# Data and Value Binding

The Kendo UI for Vue MultiSelect enables you to configure its predefined list of options and selected values.

To set the predefined option list, use the [`data-items`](https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/multiselectprops#dataitems) property. To set the selected values, use the [`value`](https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/multiselectprops#value) property.

<CtaPanelOverview></CtaPanelOverview>

## Data Binding

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

The `data-items` property accepts both:

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

### Arrays of Primitive Values

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

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

### Datasets of Objects

When you bind the MultiSelect to a dataset of objects, set the [textField](https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/multiselectprops#textfield) property, and the component's value will be an array of the selected objects.

By default, the MultiSelect compares the items by reference. To specify a field from the data object which will be used for the comparison, set the [`dataItemKey`](https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/multiselectprops#dataitemkey) property. The `dataItemKey` property is useful when the references to the selected items which are configured in the `value` or `defaultValue` property do not match their corresponding items from the `data` collection. If `dataItemKey` is not set and the references in `data` and `value` do not correspond, the selected items will not be highlighted in the drop-down list.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dropdowns/multiselect/complex-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/components/dropdowns/api/multiselectprops#value) property of the MultiSelect. If you set the value through the `value` property, hook up to the [`change`](https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/multiselectprops#onchange) event and manually update the value of the `value` property.

In the following example, the `value` of the `MultiSelect` is an array of objects(`for example [{ text: 'Football', id: 2 }]`) that holds the selected data item/s.

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

### Binding to Primitive Values from Object Fields

When you bind the MultiSelect to a dataset of objects and set the [valuePrimitive](https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/multiselectprops#valueprimitive) property to true, the component will extract its value from the [valueField](https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/multiselectprops#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 **MultiSelect** is associated with this data item: `{ text: 'Football', id: 2 }`.

In the following example, because the valueField prop is set to **id**, the component's value is "**\[2]**". This setting associates the **MultiSelect** value with the data item: `{ text: 'Football', id: 2 }`.

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

## Suggested Links

* [API Reference of the MultiSelect](https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/multiselectprops)