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

Question

我對聚合物有疑問

 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>

如果我從組合框選擇一切正常，並且valueCategoryChange()顯示selectedItem。 但是當我從值中以編程方式從組合框中選擇一項時， this.category22 = data.CatId; ，該項目顯示在組合框中，但在valueCategoryChange函數中， this.$.comboCategory.selectedItem為null請幫助我

Answer 1

如果您使用如下所示：

<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>

那么您將擁有一個選定的item屬性作為mycategory 。 另外，您將不需要valueCategoryChange函數和on-value-changed="valueCategoryChange"事件。 此外，如果您需要設置事件並想使用功能，可以使用以下功能：

valueCategoryChange: function() {
  console.log(this.mycategory);  // is the selected item that you can use 
  // this.set("mycategory", this.mycategory)  will not be useful :)) 
},

（在以下代碼段下運行）或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