如何以编程方式更改vaadin-combo-box中的selectedItem

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. 如果我从组合框选择一切正常，并且valueCategoryChange()显示selectedItem。 but when I select an item in combobox programmatically from value this.category22 = data.CatId; 但是当我从值中以编程方式从组合框中选择一项时， this.category22 = data.CatId; ,that item is shown in combobox but in valueCategoryChange function, this.$.comboCategory.selectedItem is null please help me ，该项目显示在组合框中，但在valueCategoryChange函数中， this.$.comboCategory.selectedItem为null请帮助我

Answer 1

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 . 那么您将拥有一个选定的item属性作为mycategory 。 Also you will not need a valueCategoryChange function and on-value-changed="valueCategoryChange" event. 另外，您将不需要valueCategoryChange函数和on-value-changed="valueCategoryChange"事件。 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 （在以下代码段下运行）或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>

如何以编程方式更改vaadin-combo-box中的selectedItem

问题描述

1 个解决方案

解决方案1
0 2019-02-05 18:24:33

如何以编程方式更改vaadin-combo-box中的selectedItem

问题描述

1 个解决方案

解决方案1 0 2019-02-05 18:24:33

解决方案1
0 2019-02-05 18:24:33