我一直在寻找解决问题的方法,我遇到了这篇文章和这篇文章,但它并没有解决我的问题。
我想动态地将<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>
可以通过调用render
方法强制dom-repeat
重新呈现。
渲染((: void
强制元素呈现其内容。通常渲染为 与引发性变化异步。这样做是为了提高效率,所以 多个更改仅触发单个渲染。呈现方法 例如,如果需要模板呈现 验证应用程序状态。
所以如果你的dom-repeat
是这样的
<template id="list" is="dom-repeat" items={{peoples}}>
<li>{{item}}</li>
</template>
您可以像这样强制从组件进行渲染
_test() {
this.push('peoples', 'test');
this.$.list.render();
}