Polymer 2.5.0 - dom-重复不更新

Question

我一直在四处寻找解决我问题的方法，我遇到了 this post and 但它没有解决我的问题。

我想动态地将 <li> 添加到 <ul>，但是当我使用数组突变方法时它不起作用（我可以正确记录数组的更新）。

我尝试使用 JSON 数组而不是简单的字符串，我尝试使用 this.notifyPath('peoples');，但仍然不起作用

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>

Answer 1

您可以通过调用 render 方法强制 dom-repeat 重新渲染。

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.

所以如果你的dom-repeat是这样的

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

您可以像这样从您的组件强制渲染

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

Polymer 2.5.0 - dom-重复不更新

Polymer 2.5.0 - dom-repeat not updating

html

javascript

dom

polymer-2.x