как программно изменить выделенный элемент в vaadin-combo-box в полимере - PullRequest
Новая
       31

как программно изменить выделенный элемент в vaadin-combo-box в полимере

0 голосов
/ 04 февраля 2019

У меня вопрос по полимеру 

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, пожалуйста, помогите мне

1 Ответ

0 голосов
/ 05 февраля 2019

Если вы используете, как показано ниже: 

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