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

Polymer change notification需要一个原生<input>未遵循的事件命名约定，因此您搜索的双向数据绑定需要special syntax，如下所示：

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

在你的情况下，那将是：

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

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

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

demo

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

<input>

demo

如果你知道如何增加聚合物2.0中纸张输入的用户输入文字大小，那也会有帮助

<iron-input bind-value="{{first}}"> <input> </iron-input>内部<paper-input>的字体大小可以使用<input>的{{3}} CSS属性设置样式：

<paper-input-container>

--paper-input-container-input

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

1 个答案: