如何以编程方式更改聚合物中 vaadin-combo-box 中的 selectedItem答案

【问题标题】：how change selectedItem in vaadin-combo-box in polymer programmatically如何以编程方式更改聚合物中 vaadin-combo-box 中的 selectedItem
【发布时间】：2019-02-04 04:36:26
【问题描述】：

我有一个关于聚合物的问题

valueCategoryChange: function() {
  this.set("mycategory", this.$.comboCategory.selectedItem);
},

&lt;vaadin-combo-box on-value-changed="valueCategoryChange" id="comboCategory" items="{{categories}}" item-value-path="id" value="{{category22}}" item-label-path="display" required&gt;

如果我从组合框中选择一切正常，valueCategoryChange() 显示选定项。但是当我以编程方式从值中选择组合框中的项目时 this.category22 = data.CatId; ，该项目显示在组合框中，但在 valueCategoryChange 函数中，this.$.comboCategory.selectedItem 是 null 请帮帮我

【问题讨论】：

标签： combobox polymer vaadin selecteditem

【解决方案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>

那么您将有一个选定的项目属性为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>

【讨论】：