点亮元素无法在每个循环中呈现

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

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

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

点亮元素无法在每个循环中呈现

lit element unable to render in for each loop

javascript

ecmascript-6

lit-element

vaadin14

lit