属性不会在输入更改时更新答案

【问题标题】：Properties won't update on input change属性不会在输入更改时更新
【发布时间】：2017-05-25 14:27:27
【问题描述】：

我正在尝试调整我为聚合物 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();
    }
}

指示行将始终打印 undefined。我做错了什么？

这是完整代码：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/

【问题讨论】：

标签： forms authentication polymer polymer-1.0 polymer-2.x

【解决方案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: '' }
      },
    },
  };
}

【讨论】：