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>

然后，您将拥有一个选定的项目属性为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 个答案: