我有一個像這樣的物件屬性
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 中正確顯示鍵值對，但我根本沒有渲染專案。
當我迭代陣列而不是物件時，我設法正確呈現專案，所以我不確定問題可能出在哪里。
uj5u.com熱心網友回復：
您需要回傳 html 值，否則它只是被創建和丟棄。最簡單的方法是使用map代替forEach
${Object.entries(this.pageSizeValues).map(([key, val]) =>
{ console.log(key " " val);
return html`
<vaadin-item value=${key}>${val}</vaadin-item>
`
})}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/347640.html
標籤：javascript ecmascript-6 点亮元素 vaadin14 点亮
上一篇：如何洗掉重復的物件并排序？