You are viewing documentation for Vaadin Framework 8 and related products View documentation for Vaadin Framework 7 ›
Using Objects as Items · Vaadin
Vaadin Elements - Combo Box - Using Objects as Items

Using Objects as Items

In addition to using Strings as items, Objects can also be used.
When using Objects, vaadin-combo-box needs to know which properties are to be used as the display and string values.

By default, label and value properties are used from the Object as the display value and the vaadin-combo-box value, respectively. In the absence of these properties, toString() function for the Object is used to translate it into a String.

var combobox = document.querySelector('vaadin-combo-box');
combobox.items = [{ label: 'Display Value', value: 'Actual Value' }];

The value property of the Object can hold String, Number or a Boolean primitive values. All truthy values as well as 0, -0 and false are supported. All other falsey values are not supported (such as NaN, undefined, null).

var combobox = document.querySelector('vaadin-combo-box');
combobox.items = [{ label: 'zero', value: 0 }, { label: 'false', value: false }];

You can override the default property paths by defining item-label-path and item-value-path properties.

<vaadin-combo-box item-label-path="name.first" item-value-path="name.last"></vaadin-combo-box>
var combobox = document.querySelector('vaadin-combo-box');
combobox.items = [{ name: { first: 'John', last: 'Doe' } }];