CODEWITHSUNDEEP
polymerweb-component
Schieby
Schieby

Reputation: 23

Multiple polymer 2 elements with independent properties?



I have a question to my custom polymer element. First, I made an element with a simple paper-input. My problem is, that I don't know, how to use this element as an "independent" element. My example is here in this jsfiddle. Type in the first input "asd" and hit Enter and then in the second input "asd" and hit Enter. You can see, that both elements are sharing the properties (console log "-1" not found in array and second log will be "1")

<!doctype html>
<html>
  <head>
    <title>2.0 preview elements</title>
    <base href="http://polygit.org/polymer+v2.0.0-rc.4/webcomponentsjs+webcomponents+v1.0.0-rc.6/shadycss+webcomponents+1.0.0-rc.2/paper*+polymerelements+:2.0-preview/iron*+polymerelements+:2.0-preview/app*+polymerelements+:2.0-preview/neon*+polymerelements+:2.0-preview/components/">
    <script src="webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="polymer/polymer.html">
    <link rel="import" href="paper-input/paper-input.html">
  </head>
  <body>

    <input-test></input-test>
    <input-test></input-test>

    <dom-module id="input-test">
      <template>
        <paper-input value="{{aValue}}" on-keydown="_keydown"></paper-input>
      </template>
      <script>
        window.addEventListener('WebComponentsReady', function() {
          class InputTest extends Polymer.Element {
            static get is() {
              return 'input-test';
            }

            static get properties() {
              return {
                aValue: {
                  type: String,
                  value: ''
                },
                _inputStore: {
                  type: Array,
                  value: []
                }

              };
            }

            _keydown(event) {
                const keyCode_enter = '13';
                if (event.keyCode == keyCode_enter) {
                  console.log(this._inputStore.indexOf(this.aValue))
                  this.push('_inputStore', this.aValue);
                }
            }
          }
          customElements.define(InputTest.is, InputTest);
        })

      </script>
    </dom-module>
  </body>
</html>



What can I do, to have independent properties?

Thanks!

Upvotes: 0

Views: 342

Answers (1)

Schieby
Schieby

Reputation: 23

I found the answer.

The problem is the default value declaration of the array. 

_inputStore: {
    type: Array,
    value: function () {
      return [];
    }
}

This code solves the problem.

Upvotes: 2

Related Questions