Polymer 1.0 two-way binding with textarea

Question

I have this simple two-way data binding with 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?

Answer 1

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 .