1

我在一个 lit-html 项目中，并使用谷歌的一些材料设计元素。纸-xxx。

我正在努力从paper-dropdown-menu. 我已经实现了它，如下所示：

在渲染（）

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

首次更新（）

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

我不完全确定是否iron-select会是正确的事件来听，但似乎是这样的：

应用程序可以在选择选项和取消选择来源时聆听iron-select和iron-deselect事件反应：GitHub线：63

iron-select当所选项目发生变化时用于监听是否正确？我做错了什么？

4

1 回答 1

2

这很尴尬，忘记了shadowroot。

这有效

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

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

也可以使用@event：handle-fired-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>
于 2019-05-09T09:26:13.427 回答