下拉菜单在照明元件中不起作用

时间：2019-05-09 20:29:59

标签： javascript html polymer custom-element lit-element

编辑：事实证明，如果在其他元素中使用paper-listbox之前导入paper-dropdown-menu会有所帮助。由于某些原因，我认为它是作为对我要导入的另一个元素的依赖项而导入的，但是没有。一旦添加了显式导入，它便开始正常工作。原始问题如下。

首先，仅当在paper-listbox中使用lit-element（内部带有PolymerElement）时，才会发生此问题。我们正在多个paper-dropdown-menu中以几乎完全相同的方式使用该组件，而没有任何问题。

基本上，我发现label有两个问题。第一个是它永远不会显示任何类型的值，无论是value属性还是实际选择的值，即使它的paper-listbox属性也不会改变，即使paper-dropdown-menu里面有一个设定值。第二个问题是，似乎无法从下拉菜单中选择任何值-您可以单击它们，但是列表不会关闭，并且所选的选项名称不会显示在菜单的文本显示中。

由于问题的性质，似乎问题在于其中的paper-listbox和render不能正确通信...但是如果发生以下情况我会被谴责我能弄清楚为什么。

以下是元素的<paper-dropdown-menu id="homepageSelect"> <paper-listbox slot="dropdown-content" attr-for-selected="item-value" selected="${state.homepage}" label="Select a homepage" @selected-changed="_homepageChanged"> ${state.homepageOptions.map(o => html` <paper-item item-value="${o.value}">${o.name}</paper-item> `)} </paper-listbox> </paper-dropdown-menu> 方法中存在的标记：

{
    "title": "Boss of you",
    "fullName": "J Jonah Jameson",
    "username": "jjj",
    "client": "Daily Bugle",
    "homepage": "http://sampledomain.com/",
    "homepageOptions": [{
        "name": "FrontPage",
        "value": "http://sampledomain.com/"
    }, {
        "name": "Editorials",
        "value": "http://sampledomain.com/opinion"
    }, {
        "name": "Metro",
        "value": "http://sampledomain.com/metro"
    }],
    "groups": [{
        "name": "Admin",
        "description": "Administers the whole shebang"
    }, {
        "name": "Power users",
        "description": "Like regular users, but powerful"
    }, {
        "name": "Gen pop",
        "description": "Down in the weeds"
    }],
    "changePasswordUrl": "https://change.password.now",
    "email": "test@email.com",
    "phoneWork": "404-555-1234",
    "phoneCell": "404-555-4321",
    "phoneHome": "404-123-5555",
    "address": {
        "address1": "1234 Boulevard St",
        "address2": "Ste 1",
        "city": "Atlanta",
        "state": "GA",
        "zip": "30303",
        "country": "USA",
        "type": "Office"
    }
}

以及我们正在使用的模拟数据：

paper-listbox

我将截屏显示它的外观，但是想像一下没有选择任何内容的下拉列表，您已经了解了。单击它确实会显示内部paper-dropdown-menu，但单击时列表不会关闭，单击值也不会使其达到PolymerElement元素。

任何人都知道发生了什么事吗？从理论上讲，lit-element应该可以在任何形式的HTML标记中运行-它在PolymerElement中是不应该有所作为的，并且对于我们所使用的其他所有组件都不应该有所作为使用。但是，使用此模式的该组件可在{{1}}中工作，但在这里不起作用，我也不明白为什么。

1 个答案:

答案 0 :(得分：2)

  

它永远不会显示任何类型的值，无论是label属性还是实际选择的值，即使它的value内部有一个集合，它的paper-listbox属性也不会改变。值

在模板内部，您引用的是state。如果state是元素的属性，则必须使用this.来引用它（除非它是您在render()函数的一部分中定义的变量，您没有在此处粘贴）。这可能是缺少值的原因。

缺少标签是因为您将label属性放在了<paper-listbox>中，而又将<paper-dropdown-menu>放在了$ npm install web-animations-js 中。

  

似乎无法从下拉菜单中选择任何值-您可以单击它们，但列表不会关闭，并且所选的选项名称不会显示在菜单的文本显示中。

未显示的名称应与上一点相同。我在本地尝试了您的示例，但由于动画错误，列表实际上没有关闭。发生这种情况是因为该下拉列表使用了一些必须被填充的Web Animations API功能：

<script src="node_modules/web-animations-js/web-animations-next-lite.min.js"></script>

@selected-changed

此外，您正在将字符串传递给@selected-change=${e => this. _homepageChanged(e)} or @selected-change=${this. _homepageChanged.bind(this)} （在Polymer中），而您应该使用插值：

alter table Recipe drop column version;
alter table Changes drop column version;
alter table Recipe add column version varchar(255);
alter table Changes add column version varchar(255);
alter table Recipe drop primary key, add primary key(recipeID, version);
alter table Changes drop primary key, add primary key(newRecipeID, version);
alter table Changes add foreign key(version) references Recipe(version);

这样，一切似乎都能正常工作：

example

相关问题
最新问题