Checkbox needs to be pressed twice for onclick to work

Question

I have a checkbox which is made with a DOM repeat:

<paper-listbox id="afgerondtitel">
      <paper-item id="check1">Afgerond</paper-item>
      <template is="dom-repeat" items="{{gerechten}}" count="[[num_box]]">
      <paper-item id="item_[[index]]"><paper-checkbox checked="{{item.checked}}" on-click="click"></paper-checkbox></paper-item>
      </template>
    </paper-listbox>

And I try to remove an variable from an ArrayList with this function:

click(){
        for(var i = this.gerechten.length - 1; i >= 0; i--) {
          if(this.gerechten[i].checked) {
            this.gerechten.splice(i, 1);
          }
          }
      }

The problem is that the checkbox needs to be pressed twice (so checked and then unchecked) to remove the variabele from the list.

I want to check the checkbox so the code immediately removes de variabele from the list.

Thanks in advance!

Answer 1

Actually, it's removing from the array at first click. But you need to use Polymer way array.splice in order to observable changes, So use :

 this.splice('gerechten', i, 1); // in order to observable changes in dom-repeat. 

instead of :

 this.gerechten.splice(i, 1);

For Object and Array, you will need always to observable way to changes. Check this link for more details: https://www.polymer-project.org/2.0/docs/devguide/model-data#array-mutation

DEMO