CODEWITHSUNDEEP
arraysobjectthispolymer-2.x
Tushar Acharekar
Tushar Acharekar

Reputation: 900

How use Object that stored in property of custom polymer 2.0 element

I want to store few object in polymer declare property(array) and i will use those object later.

It will store object but method of that object not getting fired.

Workflow

Below is my code,

 <dom-module id="my-search">
   <template>
    <style>
      :host {
        display: table;
        width: 100%;
      }
    </style>
          <paper-icon-button id="search" icon="search"></paper-icon-button>
  </template>

  <script>
    class MySearch extends Polymer.Element {
      static get is() { return 'my-search'; }

        static get properties() {
            return {
              pageActive: {
                type: String,
                observer: '_pageActive'
              },
              ObjectCollection: {
                type: Array,
                notify: true,
                readOnly: false,
                observer: '_showAllObject'  
              }       
          }

             _pageActive(){
                var thisElement = this;
                var element1 = this.$.search;
                this.ObjectCollection = [{thisElement },{element1}];
             }

            _showAllObject(){
                console.log(this.ObjectCollection);
                this.ObjectCollection[0]._test();
            } 

            _test(){
                alert("testing...!");
            }      
        }
    }

    window.customElements.define(MySearch.is, MySearch);
  </script>
</dom-module>

Why _test() method is not getting call as this.ObjectCollection[0] is this object

Upvotes: 2

Views: 110

Answers (1)

Cappittall
Cappittall

Reputation: 3441

In order to observable object changes, use:

this.set('ObjectCollection', [thisElement, element1]);

instead of 

 this.ObjectCollection = [{thisElement },{element1}];

Then your _showAllObject function will be fired.

Upvotes: 3

Related Questions