Estoy teniendo una propiedad de objeto como tal
pageSizeValues: { type: Object }que se está instanciando así
this.pageSizeValues = {10: 10, 25: 25, 50: 50};En base a esto, me gustaría crear un menú desplegable con 3 entradas, es decir, iterando sobre 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>Si bien console.log muestra correctamente los pares clave-valor en la interfaz de usuario, no obtengo los elementos en absoluto.
Logré representar los elementos correctamente cuando estaba iterando sobre una matriz en lugar de un objeto, por lo que no estoy seguro de dónde podría estar el problema.
Debe devolver el valor html o simplemente se crea y se descarta. La forma más fácil es usar map en lugar de forEach
${Object.entries(this.pageSizeValues).map(([key, val]) => { console.log(key + " " + val); return html` <vaadin-item value=${key}>${val}</vaadin-item> ` })}