how change selectedItem in vaadin-combo-box in polymer programmatically
Question
I have a question in polymer
valueCategoryChange: function() { this.set("mycategory", this.$.comboCategory.selectedItem); },
<vaadin-combo-box on-value-changed="valueCategoryChange" id="comboCategory" items="{{categories}}" item-value-path="id" value="{{category22}}" item-label-path="display" required>
if I select from combobox everything work well and valueCategoryChange() shows selectedItem. but when I select an item in combobox programmatically from value this.category22 = data.CatId; ,that item is shown in combobox but in valueCategoryChange function, this.$.comboCategory.selectedItem is null please help me
1 answers
solution1
0 2019-02-05 18:24:33
If you use like below:
<vaadin-combo-box selected-item="{{mycategory}}" id="comboCategory" items="{{categories}}" item-value-path="id" value="{{category22}}" item-label-path="display" required>
<div> Selected Item is [[mycategory]]</div>
then you will have a selected item property as mycategory . Also you will not need a valueCategoryChange function and on-value-changed="valueCategoryChange" event. Beside this if you need to set event and want to use the functions than you can use:
valueCategoryChange: function() {
console.log(this.mycategory); // is the selected item that you can use
// this.set("mycategory", this.mycategory) will not be useful :))
},
(Run below code snipped) or DEMO
HTMLImports.whenReady( ()=> { class XFoo extends Polymer.Element { static get is() { return 'x-foo'; } } window.customElements.define(XFoo.is, XFoo) })
<head> <script <base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/"> <script src="webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="polymer/polymer.html"> <link rel="import" href="https://cdn-origin.vaadin.com/vaadin-core-elements/master/vaadin-combo-box/vaadin-combo-box.html"> <link rel="import" href="https://cdn-origin.vaadin.com/vaadin-core-elements/master/vaadin-grid/all-imports.html"> </head> <body> <x-foo id="xfoo"items="{{categories}}"></data-table-d> <dom-module id="x-foo"> <template> <vaadin-combo-box selected-item="{{mycategory}}" id="comboCategory" items="{{categories}}" value="{{category22}}" ></vaadin-combo-box><br><br> <div> Selected Item is [[mycategory]]</div> <script> var el = document.getElementById('xfoo'); el.categories=['Cat1', 'Cat2','Cat3']; </script> </template> </dom-module>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.