javascript - 重置 polymer 纸张输入容器值和标签

Question

提交表单后，我无法重置纸张输入容器内的标签。该表单是一个简单的登录表单。如果用户在没有刷新页面(从浏览器)的情况下登录、注销并再次登录，标签就会卡住，就好像输入中有值一样。

这是显示差异的图像:

这是元素内部的形式:

<form is="iron-form">

    <paper-input-container id="email_container">
        <paper-input-error>E-mail or Password is incorrect</paper-input-error>
        <label>E-Mail Address</label>
        <input is="iron-input" id="email" on-blur="validateEmail" value="{{emailInput::input}}">
        </paper-input-container>

        <paper-input-container id="password_container">
            <label>Password</label>
            <input is="iron-input" id="password" type="password" value="{{passwordInput::input}}">
        </paper-input-container>

    <paper-button raised dialog-dismiss>Cancel</paper-button>
    <paper-button raised on-tap="handleCsrf">Login</paper-button>

</form>

这两种方法都使表单进入“登录后”状态相同:

//
this.emailInput = null;
this.passwordInput = null;

//
this.emailInput = "";
this.passwordInput = "";

我以为这会以某种方式重置整个容器，但它什么也没做:

this.$.email_container = null;
this.$.password_container = null;

Answer 1

iron-input

bindValue String Use this property instead of value for two-way data binding.

   <paper-input-container id="email_container">
    <paper-input-error>E-mail or Password is incorrect</paper-input-error>
    <label>E-Mail Address</label>
    <input is="iron-input" id="email" on-blur="validateEmail" bind-value="{{emailInput::input}}">
    </paper-input-container>

    <paper-input-container id="password_container">
        <label>Password</label>
        <input is="iron-input" id="password" type="password" bind-value="{{passwordInput::input}}">
    </paper-input-container>

使用 bindValue 显然 this.emailInput = null 和 this.set('emailInput, null) 都能达到目的。