聚合物1.0双向结合textarea

时间:2020-12-10 20:28:15

I have this simple two-way data binding with textarea:

我有这个与textarea简单的双向数据绑定:

<dom-module id="my-element">
  <style>
  </style>

  <template>
    <button on-click="click">Click me!</button>
    <textarea>{{element}}</textarea>
  </template>
</dom-module>

<script>
  Polymer({
    is: "my-element",

    properties: {
      element: {
        type: String,
        value: "Default value",
        notify: true
      }
    },

    click: function() {
      console.log(this.element);
    }
  });
</script>

The textarea show up with "Default Value". When I change this value and then click on the button, the console still log out Default value instead of the text that I just typed in. What did I do wrong here?

textarea显示“默认值”。当我更改此值然后单击按钮时,控制台仍然会注销默认值而不是我刚输入的文本。我在这里做错了什么?

1 个解决方案

#1


0  

You should use <iron-autogrow-textarea> to allow data binding.

您应该使用 来允许数据绑定。

<dom-module id="my-element">
  <style>
  </style>

  <template>
    <button on-click="click">Click me!</button>
    <iron-autogrow-textarea bind-value="{{element}}"></iron-autogrow-textarea>
  </template>
</dom-module>

<script>
  Polymer({
    is: "my-element",

    properties: {
      element: {
        type: String,
        value: "Default value",
      }
    },

    click: function() {
      console.log(this.element);
    }
  });
</script>
</dom-module>

Documentation is here.

文档在这里。

#1


0  

You should use <iron-autogrow-textarea> to allow data binding.

您应该使用 来允许数据绑定。

<dom-module id="my-element">
  <style>
  </style>

  <template>
    <button on-click="click">Click me!</button>
    <iron-autogrow-textarea bind-value="{{element}}"></iron-autogrow-textarea>
  </template>
</dom-module>

<script>
  Polymer({
    is: "my-element",

    properties: {
      element: {
        type: String,
        value: "Default value",
      }
    },

    click: function() {
      console.log(this.element);
    }
  });
</script>
</dom-module>

Documentation is here.

文档在这里。