点亮元素无法为每个循环渲染

Question

我有一个像这样的对象属性

pageSizeValues: {
  type: Object
}

像这样被实例化

this.pageSizeValues = {10: 10, 25: 25, 50: 50};

基于此，我想构建一个包含 3 个条目的下拉列表，即通过迭代 pageSizeValues

<vaadin-select @change="${event => this.setLimit(event.target.value)}" value="${this.limit}" placeholder="Page Size" style="width: 80px">
  <template>
    <vaadin-list-box>
      ${Object.entries(this.pageSizeValues).forEach(([key, val]) => 
          {   console.log(key + " " + val);
              html`
                <vaadin-item value=${key}>${val}</vaadin-item>
                 `
            })}
    </vaadin-list-box>
  </template>
</vaadin-select> 

虽然 console.log 在 UI 中正确显示键值对，但我根本没有得到呈现的项目。

当我迭代数组而不是对象时，我设法正确渲染了项目，所以我不确定问题可能出在哪里。

Answer 1

您需要返回 html 值，否则它只是被创建和丢弃。最简单的方法是使用map 而不是forEach

      ${Object.entries(this.pageSizeValues).map(([key, val]) => 
          {   console.log(key + " " + val);
              return html`
                <vaadin-item value=${key}>${val}</vaadin-item>
                 `
            })}