CODEWITHSUNDEEP
javascripthtmldompolymer-2.x
NeitoFR
NeitoFR

Reputation: 807

Polymer 2.5.0 - dom-repeat not updating

I've been looking around SO for a solution to my problem, I came across this post and this other post but it doesn't solve my issue.

I want to add <li> to an <ul> dynamically but when I use the array mutation methods it doesn't work (I can log updates of the array properly).

I tried to use a JSON array instead of a simple string, and I tried to do a this.notifyPath('peoples');, but still, do not work

static get properties() {
    return {
        peoples: {
            type: Array,
            value: []
        }
    }
}
_test2() {
    console.log(this.peoples);

}
_test() {
    this.push('peoples', 'test');
}
<div class="flex__item--top list">
    <ul id="namelist">
        <template is="dom-repeat" items={{peoples}}>
            <li>{{item}}</li>
        </template>
    </ul>
</div>

Upvotes: 2

Views: 1650

Answers (1)

Hyyan Abo Fakher
Hyyan Abo Fakher

Reputation: 3537

You can force dom-repeat re-render by calling the render method.

render(): void

Forces the element to render its content. Normally rendering is asynchronous to a provoking change. This is done for efficiency so that multiple changes trigger only a single render. The render method should be called if, for example, template rendering is required to validate application state.

so if your dom-repeat is like this 

<template id="list" is="dom-repeat" items={{peoples}}>
            <li>{{item}}</li>
</template>

You can force the render from your component like this 

_test() {
    this.push('peoples', 'test');
    this.$.list.render();
}

Upvotes: 3

Related Questions