Data and Value Binding

The MultiSelect enables you to configure its predefined list of options and selected values.

To set the predefined option list, use the data-items property. To set the selected values, use the value property.

The MultiSelect Component is part of Kendo UI for Vue, a professional grade UI library with 90+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Data Binding

To bind the MultiSelect to data, use the data-items property of the component.

The data-items property accepts both:

Arrays of Primitive Values

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

Example
View Source
Change Theme:

Datasets of Objects

If the MultiSelect is bound to a dataset of objects, the textField property needs to be set and the value of the component 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, utilize the 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.

Example
View Source
Change Theme:

Value Binding

Binding to Object Value

If you want to render the selected value you can use v-model or to use the value property of the MultiSelect. 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 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.

Example
View Source
Change Theme:

Binding to Primitive Values from Object Fields

If the MultiSelect is bound to a dataset of objects and the valuePrimitive property is set to true, the value of the component will be extracted from the 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 }.

Example
View Source
Change Theme: