Eventlistener для бумаги-выпадающего меню в Lit-HTML - PullRequest
Новая
       76

Eventlistener для бумаги-выпадающего меню в Lit-HTML

1 голос
/ 09 мая 2019

Я нахожусь в освещенном HTML-проекте и использую некоторые элементы дизайна материалов от Google.paper-xxx.

Я изо всех сил пытаюсь получить событие из paper-dropdown-menu.Я реализовал это, как показано ниже:

В render () 

<paper-dropdown-menu 
    label="Change position"
    id="changePositionDropdown">
    <paper-listbox 
        slot="dropdown-content" 
        class="dropdown-content"                 
        selected="${this.positionForVideoInPlaylist-1}">
    <paper-item value="1">1</paper-item>
    <paper-item value="2">2</paper-item>
    </paper-listbox>
</paper-dropdown-menu>

firstUpdated () 

const changePositionDropdown = document.getElementById("changePositionDropdown");
    changePositionDropdown.addEventListener('iron-select', (e)=>{
        console.log("Hello there");
    });

Я не совсем уверен, будет ли iron-selectправильное событие для прослушивания, но похоже на это в соответствии с этим:

Приложения могут прослушивать события iron-select и iron-deselect, чтобы реагировать при выборе и отмене параметров. Источник: github line: 63

Правильно ли будет использовать iron-select для прослушивания при изменении выбранного элемента?И что я делаю не так?

1 Ответ

1 голос
/ 09 мая 2019

Это неловко, забыл про теневой корень.

Это работает 

firstUpdated(){
 const changePositionDropdown = this.shadowRoot.querySelector('#changePositionDropdown');

    changePositionDropdown.addEventListener('iron-select', (e)=>{
        console.log("Hello there");
    });
}

Также можно использовать @event: событие с обработкой ручки 

<paper-dropdown-menu 
    label="Endre rekkefølge"
    id="changePositionDropdown"
    @iron-select="${(e)=>{console.log("surprise")}}"> <!-- using the @ to handle the vent-->
    <paper-listbox 
        slot="dropdown-content" 
        class="dropdown-content" 
        selected="${this.positionForVideoInPlaylist-1}">
        <paper-item>1</paper-item>
    </paper-listbox>
</paper-dropdown-menu>
...