屬性不會更新輸入更改

Question

我試圖適應聚合物1.0中找到的工作表單，以便在聚合物2.0上工作，但這兩種數據綁定似乎不起作用。

我的模板：

<paper-input> 
    <label>Username</label> 
     <iron-input bind-value={{formData.username}}><input id="username" type="text" value="{{formData::input}}"></iron-input> 
</paper-input> 

<paper-input> 
    <label>Password</label> 
    <iron-input bind-value={{formData.password}}><input id="password" type="password" value="{{formData::input}}"></iron-input> 
</paper-input> 

<div class="wrapper-btns"> 
    <paper-button raised class="primary" on-tap="postLogin">Log In</paper-button> 
    <paper-button class="link" on-tap="postRegister">Sign Up</paper-button> 
</div> 

我的行爲：

class MyLogin extends Polymer.Element { 
    static get is() { return 'my-login'; } 
    static get properties() { 
     return { 
      storedUser: Object, 
      error: String, 
      formData: { 
       type: Object, 
       value: {}, 
      }, 

     } 
    } 
    _setReqBody() { 
     console.log(this.formData) // <--- THIS LINE! 
     this.$.registerLoginAjax.body = this.formData; 
    } 
    postLogin() { 
     this.$.registerLoginAjax.url = 'http://localhost:3001/sessions/create'; 
     this._setReqBody(); 
     this.$.registerLoginAjax.generateRequest(); 
    } 
} 

的指示線將始終打印未定義雖然。我究竟做錯了什麼？

下面是完整的代碼：https://github.com/lpfjustino/PolymerQuickstart/blob/master/web/src/my-login.html 而這裏的代碼我的依據是： https://auth0.com/blog/build-your-first-app-with-polymer-and-web-components/

Answer 1

paper-input默認情況下並不需要它裏面任何label也不iron-input。這隻適用於paper-input-container。所以下面會好起來的

<paper-input label="Username" value="{{formData.username}}"></paper-input> 

但是，如果你堅持要用paper-input-container代替，然後

<paper-input-container> 
    <label slot="label">Username</label> 
    <iron-input bind-value="{{formData.username}}" slot="input"> 
    <!-- You don't need to add two-way binding for your input element here 
     since `iron-input` already handles that for you using its `bind-value` 
     attribute. --> 
    <input /> 
    </iron-input> 
</paper-input-container> 

此外，當你宣佈一個Object屬性，則應使用功能，以確保每個初始化元素實例將擁有其自己的屬性副本。

static get properties() { 
    return { 
    ... 
    formData: { 
     type: Object, 
     value: function() { 
     return {}; // or return { username: '', password: '' } 
     }, 
    }, 
    }; 
}