Lit Element在forEach循环遍历对象时无法渲染元素问题求助

问题根因 #

问题出在遍历方法选择错误：Array.prototype.forEach 没有返回值，执行后仅返回 undefined，因此模板引擎无法获取你生成的 <vaadin-item> 节点，自然无法渲染对应选项。你之前遍历数组能正常渲染，大概率是使用了会返回结果数组的 map 方法。

修复方案 #

将 forEach 替换为 map，直接返回生成的html片段即可，修改后代码如下：

<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).map(([key, val]) => 
          html`
            <vaadin-item value=${key}>${val}</vaadin-item>
                 `
        )}
    </vaadin-list-box>
  </template>
</vaadin-select> 

可选优化 #

如果需要严格保证选项的排序顺序（避免对象数字键自动排序不符合预期），可以先对遍历结果做排序处理再生成节点：

Object.entries(this.pageSizeValues)
  // 按数值升序排序
  .sort((a,b) => Number(a[0]) - Number(b[0]))
  .map(([key, val]) => html`<vaadin-item value=${key}>${val}</vaadin-item>`)

内容的提问来源于stack exchange，提问作者Sergiu