Polymer2: Update view of array element, generated via dom repeat

Question

I've a array of objects which create their view via dom-repeat. In this view I have a button which increases a property of a array element. But the view is not refreshed after this. Is their a way to notify polymer2 to update:

Here is a Bit of Code:

        <template id="filterElementList" is="dom-repeat" items="{{filterElements}}">
            <div style="display: flex;">
                <filter-panel-element style$="margin-left: {{_computeLevel(item.level)}}px;"></filter-panel-element>
                <i class="fa fa-arrow-circle-left" aria-hidden="true" on-click="_decreaseLevel"></i>
                <i class="fa fa-arrow-circle-right" aria-hidden="true" on-click="_increaseLevel"></i>
            </div>
        </template>

JS:

        _increaseLevel: function (e) {
            e.model.item.level++;
        },

I update the level Property of the element, but the view is not updated.

Answer 1

So, Considering your template is bound to filterElements and you are trying to increment a sub property of an item within your array ,

you might have to specify the data.path while updating a property and/or a sub property of an array, of your element.

so try this:

• e.model.set('item.level',e.model.item.level+1)

Polymer has this documented in their data system documentation, and it helps Polymer propagate event notifications and also observe the data mutations.

If you can create a plunk, with your array and your elements, it'd be easier to troubleshoot further.

That is in case, the above changes to your code, don't achieve the desired result