如何在EventListener CustomEvent上添加Vaadin14 WebComponent

Question

我想用StencilJs创建一个web组件，我使用Vaadin 14的MultiSelectListBox组件，我尝试将一个函数绑定到CustomEvent MultiSelectListBox，但是我不知道它是如何工作的。

我试过了：

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

Answer 1

我不熟悉StencilJs库，所以不确定下面的解决方案是否可以直接应用，但是在聚合物模板中您可以这样做：

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

Notes

selectedValues返回一个索引数组，因此如果需要的话，您需要自己提取名称。