入力の変更時にプロパティが更新されない

Question

ポリマー2.0で作業するために私が見つけた作業用フォームを適合させようとしていますが、これら2通りのデータバインディングは機能していません。

マイテンプレート：

<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(); 
    } 
} 

ザ・を示す行は常にかかわらず、未定義の印刷されます。私は間違って何をしていますか？

はここで完全なコードです：デフォルトで内部の任意のlabelもiron-inputを必要としません https://auth0.com/blog/build-your-first-app-with-polymer-and-web-components/

Answer 1

paper-input：https://github.com/lpfjustino/PolymerQuickstart/blob/master/web/src/my-login.html そしてここでは、コード鉱山だが基づいています。それはpaper-input-containerのためにだけ行く。だから、次はあなたの代わりにpaper-input-containerを使う、という場合は、Objectプロパティを宣言するとき

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

しかし、その後、

<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> 

また、あなたはそれぞれのことを保証するための機能を使用して、それを初期化する必要があります大丈夫だろう要素インスタンスにはそのプロパティの独自のコピーがあります。

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