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

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

render(): void

强制元素呈现其内容。通常渲染是   与令人发指的变更异步。这样做是为了提高效率，所以   多个更改仅触发一个渲染。渲染方法   例如，如果需要模板渲染，则应调用   验证应用程序状态。

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

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

您可以像这样

从组件强制渲染

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

聚合物2.5.0-dom-repeat不更新

1 个答案: