Question

使用以下代码，我希望在页面加载时显示“选项1”。而是显示“标签在这里”。单击下拉选项1时以粗体显示已选中。如果我单击选项1，则标签会更新并且正确

<paper-dropdown-menu label="Label Here" selected="0">
<paper-menu class="dropdown-content" selected="0">
<paper-item >Option 1</paper-item>
<paper-item >Option 2</paper-item>
</paper-menu>
</paper-dropdown-menu>

这是使用Github的最新组件

  "dependencies": {
    "polymer": "1.0.8",
    "iron-elements": "1.0.3",
    "paper-elements": "PolymerElements/paper-elements#1.0.3",
    "page": "1.6.3",
    "adal-angular": "1.0.4",
    "moment": "2.10.6",
    "jaydata": "1.3.6",
    "bootstrap": "3.3.5",
    "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#1.0.1"

  }

这是一个错误还是我做错了什么？

谢谢！

丹尼尔

Answer 1

所选属性适用于纸质菜单，而不适用于纸张下拉菜单。但后者的selectedItemLabel是计算的，selectedItem是readOnly。我发现预加载所选项目的唯一方法是触发'铁激活'事件，但不确定它是否是最佳的。

<dom-module id="my-test">
    <template>
        <paper-dropdown-menu id="dropdownMenu" label="Label Here" >
            <paper-menu id="menu" class="dropdown-content" selected="0">
                <paper-item id="option1">Option 1</paper-item>
                <paper-item id="option2">Option 2</paper-item>
            </paper-menu>
        </paper-dropdown-menu>
    </template>
    <script>
        Polymer({
            is: 'my-test',
            ready: function(){


                this.$.menu.dispatchEvent(new CustomEvent('iron-activate', {
                    bubbles: true,
                    cancelable: true,
                    detail: {
                        item:this.$.option2,
                        selected:1
                    }
                }));
            }
        });
    </script>
</dom-module>

Answer 2

只是更新了这是一个已知的错误并且不是预期的行为，即使上述解决方法可能有效：

https://github.com/PolymerElements/paper-dropdown-menu/issues/3

希望这个问题很快就能解决！

初始选择的聚合物纸张下拉菜单未显示在标签

2 个答案: