属性不会更新输入更改

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: '' } 
     }, 
    }, 
    }; 
}