javascript - vaadin-grid selection not working -

the row selection not working me. selecteditems array changes if select @ once. not sure if got wrong or if bug.

selecteditems: array contains selected items. https://www.webcomponents.org/element/vaadin/vaadin-grid/elements/vaadin-grid

<link rel="import" href="../bower_components/polymer/polymer-element.html">  <link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html"> <link rel="import" href="../bower_components/vaadin-grid/vaadin-grid-selection-column.html">  <dom-module id="schedule-vaadin-test">      <template>          <vaadin-grid id="material" aria-label="array data example" items="[[items]]" selected-items="{{selecteditems}}">              <vaadin-grid-selection-column auto-select>             </vaadin-grid-selection-column>              <vaadin-grid-column width="50px" flex-grow="0">                 <template class="header">#</template>                 <template>[[index]]</template>             </vaadin-grid-column>              <vaadin-grid-column>                 <template class="header">first name</template>                 <template>[[item.firstname]]</template>             </vaadin-grid-column>              <vaadin-grid-column>                 <template class="header">last name</template>                 <template>[[item.lastname]]</template>             </vaadin-grid-column>          </vaadin-grid>     </template>      <script>         /**          * @customelement          * @polymer          */         class schedulevaadintest extends polymer.element {             static is() {                 return 'schedule-vaadin-test';             }              static properties() {                 return {                     items: {                         type: array,                         value: [{"firstname":"foo", "lastname":"bar"},                                 {"firstname":"foo", "lastname":"bar"},                                 {"firstname":"foo", "lastname":"bar"}]                     },                      selecteditems: {                         type: array,                         observer: 'selecteditemschanged'                     }                 };             }              static observers() {                 return []             }              selecteditemschanged() {                 console.log(this.selecteditems);             }         }          customelements.define(schedulevaadintest.is, schedulevaadintest);     </script> </dom-module> 

complex observers declared in observers array. complex observers can monitor 1 or more paths. these paths called observer's dependencies.

i forgot use complex observer. not sure why objects changes twice on selection. going updated answer know.

[edit: observer changed observe splice only. value of array not changing twice printing on console twice since using wildcard(*) observer. called observer first when observed splices , when observed change in length of array. ]

<link rel="import" href="../bower_components/polymer/polymer-element.html">  <link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html"> <link rel="import" href="../bower_components/vaadin-grid/vaadin-grid-selection-column.html">  <dom-module id="schedule-vaadin-test">      <template>          <vaadin-grid id="material" aria-label="array data example" items="[[items]]" selected-items="{{selecteditems}}">              <vaadin-grid-selection-column>             </vaadin-grid-selection-column>              <vaadin-grid-column width="50px" flex-grow="0">                 <template class="header">#</template>                 <template>[[index]]</template>             </vaadin-grid-column>              <vaadin-grid-column>                 <template class="header">first name</template>                 <template>[[item.firstname]]</template>             </vaadin-grid-column>              <vaadin-grid-column>                 <template class="header">last name</template>                 <template>[[item.lastname]]</template>             </vaadin-grid-column>          </vaadin-grid>     </template>      <script>         /**          * @customelement          * @polymer          */         class schedulevaadintest extends polymer.element {             static is() {                 return 'schedule-vaadin-test';             }              static properties() {                 return {                     items: {                         type: array,                         value: [{"firstname":"foo1", "lastname":"bar1"},                                 {"firstname":"foo2", "lastname":"bar2"},                                 {"firstname":"foo3", "lastname":"bar3"}]                     },                     /*activeitem: {                         type: array,                         observer: '_activeitemchanged'                     },--this not being used*/                      selecteditems: {                         type: array                     }                 };             }              static observers() {                 return [                     //'_selecteditemschanged(selecteditems.*)'                       '_selecteditemschanged(selecteditems.splices)'                 ]             }              _selecteditemschanged() {                 console.log(this.selecteditems);             }         }          customelements.define(schedulevaadintest.is, schedulevaadintest);     </script> </dom-module>