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

输入更改时属性不会更新

1 个答案: