如何重置铁形式内的纸张下拉菜单？

Question

示例代码：

<iron-form id="form1">
    <form method="get" action="/form/handler">
        <paper-input name="name" label="Name" required></paper-input>
        <paper-dropdown-menu label="Dinosaurs">
            <paper-listbox slot="dropdown-content" selected="1">
                <paper-item>allosaurus</paper-item>
                <paper-item>brontosaurus</paper-item>
                <paper-item>carcharodontosaurus</paper-item>
                <paper-item>diplodocus</paper-item>
            </paper-listbox>
        </paper-dropdown-menu>
        <paper-button raised on-click="_save">Save</paper-button>
        <paper-button raised on-click="_reset">Reset</paper-button>
      </form>
</iron-form>

...


_reset() {
    this.$.form1.reset();
}

单击 'Reset' 按钮时，下拉菜单未设置为其默认值。

Answer 1

paper-dropdown-menu 的问题是它没有自己设置值的机制。

它允许您通过 contentElement 属性获取其包含的 paper-listbox 并调用一个设置方法。

恐怕 iron-form 无法在这里执行任何魔法，所以我会扩展 _reset 方法：

_reset() {
    this.$.myDropdown.contentElement.set('selected', null); // or whatever fallback
    this.$.form1.reset();
}

当然你也可以直接引用listbox

Answer 2

您可以为所选属性使用变量：

 <paper-listbox slot="dropdown-content" selected="{{selected}}">

并在 :

处定义选定的属性

 static get properties() { return {
     selected: {type:Number, value:1},...

并在重置函数时将其设置为 1：

_reset() {
    this.set('selected', 1);  // 
    this.$.form1.reset();
}

提交表单数据时可以使用 selected 属性的 Polymer 方式。

如何重置铁形式内的纸张下拉菜单？

How to reset paper-dropdown-menu inside an iron-form?

javascript

polymer