Как добавить EventListener на CustomEvent в Vaadin14 WebComponent - PullRequest
Новая
       109

Как добавить EventListener на CustomEvent в Vaadin14 WebComponent

1 голос
/ 24 февраля 2020

Я хочу создать веб-компонент с Трафарет Js, и я использую MultiSelectListBox компоненты Vaadin 14. Я пытаюсь привязать функцию к CustomEvent выбранные-измененные значения , но я не знаю, как это работает.

Я пробовал это: 

import '@vaadin/vaadin-list-box'
...
<vaadin-list-box onSelectedValuesChange={this.foo} multiple>
...
</vaadin-list-box>

1 Ответ

1 голос
/ 24 февраля 2020

Я не знаком с библиотекой Stencil Js, поэтому не уверен, что приведенное ниже решение применимо напрямую, но в полимерном шаблоне вы можете сделать что-то вроде этого: 

ready() {
     super.ready();
     var divValue=this.shadowRoot.querySelector("#output");
     this.shadowRoot.querySelector("#vlb").addEventListener('selected-values-changed', function(event) {
            console.log(this.selectedValues);
            divValue.innerText=this.selectedValues + " First Item: " + 
                this.items[this.selectedValues[0]].value;
        });

И полный пример: 

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import '@vaadin/vaadin-list-box/vaadin-list-box.js';

/**
 * `listbox-view`
 *
 * ListboxView element.
 *
 * @customElement
 * @polymer
 */
class ListboxView extends PolymerElement {

    static get template() {
        return html`
            <style include="shared-styles">
                :host {
                    display: block;
                }
            </style>
   <div>
    <vaadin-list-box id="vlb" multiple>
      <b>Register to Language Courses</b>
      <vaadin-item>Finnish</vaadin-item>
      <vaadin-item>Swedish</vaadin-item>
      <hr>
      <vaadin-item disabled>Spanish (not available)</vaadin-item>
      <vaadin-item>English</vaadin-item>
   </vaadin-list-box>
   <div id="output">Selected value:</div>
</div>
        `;
    }

    static get is() {
        return 'listbox-view';
    }

    ready() {
        super.ready();
        var divValue=this.shadowRoot.querySelector("#output");
        this.shadowRoot.querySelector("#vlb").addEventListener('selected-values-changed', function(event) {
            console.log(this.selectedValues);
            divValue.innerText=this.selectedValues + " First Item: " + this.items[this.selectedValues[0]].value;
        });
    }

    static get properties() {
        return {
            // Declare your properties here.
        };
    }
}

customElements.define(ListboxView.is, ListboxView);

Примечания :

Свойство selectedValues возвращает массив индексов, поэтому вы могли бы Нужно извлечь имена самостоятельно, если они вам нужны.

...