无法将数据绑定到 Polymer 2.0 中的 <input>

Question

我正在尝试使用以下代码从我的 <paper-input-container> 获取用户输入：

<paper-input-container id="nameInput">
  <label slot="label">Your name</label>
  <iron-input slot="input">
    <input on-keydown="keypressed" value="{{first}}" id="nameBox">
  </iron-input>
</paper-input-container>

在我的 properties 中，我有：

static get properties() {
  return {
     first:{
       type:String,
       value:''
     }
  }
}

我的 keypressed 函数是：

keypressed(e) {
    console.log(this.first);
}

我已经能够让它与 <paper-input> 元素一起工作，但我无法按照我想要的方式设置它的样式。如果您知道如何在 Polymer 2.0 中增加纸张输入的用户输入文本大小，那也会有所帮助。

Answer 1

聚合物的change notification requires an event naming convention that the native <input> does not follow, so the two-way data binding you seek requires special syntax，如下所示：

target-prop="{{hostProp::target-change-event}}"

在你的情况下，那将是：

<input value="{{first::input}}>

这告诉 Polymer 在 <input> 发生 input 事件时将 first 设置为 value。这相当于：

const inputEl = this.shadowRoot.querySelector('input');
inputEl.addEventListener('input', () => this.first = value);

demo

或者，您可以将 first 绑定到 <iron-input>.bindValue，这反映了 <input> 的 value:

<iron-input bind-value="{{first}}">
  <input>
</iron-input>

demo

if you know how to increase the user input text size on paper-input in polymer 2.0, that would also help

<paper-input> 的内部 <input> 的字体大小可以用 <paper-input-container> 的 --paper-input-container-input CSS 属性设置样式:

<dom-module id="x-foo">
  <template>
    <style>
      paper-input {
        --paper-input-container-input: {
          font-size: 40px;
        };
      }
    </style>
    <paper-input label="My label" value="My value"></paper-input>
  </template>
</dom-module>

demo

无法将数据绑定到 Polymer 2.0 中的 <input>

Cannot data bind to <input> in Polymer 2.0

data-binding

polymer

polymer-2.x