How to dynamically change array using jQuery in polymer?

Question

I have some HTML contain like this

<iron-list is="dom-repeat" items="[[userList]]" as="user">
    <paper-checkbox class="styled sizeCheckbox">
        <div class="primary">[[user.userName]]</div>
    </paper-checkbox> 
</iron-list>

In the my js file i am updating the "userList" array.

if (event.target.checked) {
    this.userList.push(event.target.value);
} else {
    var index = this.userList.indexOf(event.target.value);
    this.userList.splice(index, 1);
}

As i update value in array, it's not reflecting directly value in "userList" array, How to we can update it with out page refresh ?

Answer 1

Use Polymer's array mutation methods to make observable changes to arrays. https://www.polymer-project.org/1.0/docs/devguide/model-data#work-with-arrays

Please update your code:

if (event.target.checked) {
    this.push('userList', event.target.value);
} else {
    var index = this.userList.indexOf(event.target.value);
    this.splice('userList', index, 1);
}

I wish this Demo can help you.