Polymer 2.5.0 - dom-repeat 不更新

Question

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

我想动态地将<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

强制元素呈现其内容。通常渲染是 异步到一个挑衅的变化。这样做是为了提高效率 多次更改只会触发一次渲染。渲染方法 应该调用，例如，如果需要模板渲染 验证应用程序状态。

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

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

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

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