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 item 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.
Notice that the value property of the vaadin-combo-box would always contain the string value, whenever Objects or Strings are used for items. Use the selectedItem property to access the selected item object directly.
Selected item: .
Value: .
HTMLImports.whenReady(function() {
// code
var combobox = combobox || document.querySelector('.numbers-box');
combobox.items = [
{label: 'One', value: 1},
{label: 'Two', value: 2},
{label: 'Three', value: 3}
];
combobox.addEventListener('selected-item-changed', function() {
document.querySelector('#selected-item').innerHTML = JSON.stringify(combobox.selectedItem);
});
combobox.addEventListener('value-changed', function() {
document.querySelector('#value').innerHTML = combobox.value;
});
combobox.value = 1;
// end-code
});
You can override the default property paths by defining item-label-path and item-value-path properties.
Selected element name: .
Value: .
HTMLImports.whenReady(function() {
// code
var combobox = combobox || document.querySelector('.elements-box');
// elementsJson is an Array of Objects. Item object format:
// {name: 'Hydrogen', symbol: 'H', number: 1}
combobox.items = elementsJson;
combobox.addEventListener('selected-item-changed', function() {
document.querySelector('#element-name').innerHTML = combobox.selectedItem && combobox.selectedItem.name;
});
combobox.addEventListener('value-changed', function() {
document.querySelector('#element-value').innerHTML = combobox.value;
});
combobox.value = 'C';
// end-code
});