I'm having an object property like so

pageSizeValues: {
  type: Object
}

that is being instantiated like this

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

Based on it I'd like to build a dropdown with 3 entries, that is by iterating over the 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> 

While the console.log properly display the key-value pairs in the UI I'm not getting the items rendered at all.

I managed to render the items properly when the I was iterating over an array instead of an Object so I'm not sure where the issue might be.

I'm having an object property like so

pageSizeValues: {
  type: Object
}

that is being instantiated like this

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

Based on it I'd like to build a dropdown with 3 entries, that is by iterating over the 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> 

While the console.log properly display the key-value pairs in the UI I'm not getting the items rendered at all.

I managed to render the items properly when the I was iterating over an array instead of an Object so I'm not sure where the issue might be.

• javascript
• ecmascript-6
• lit-element
• vaadin14
• lit

1 Answer 1

You need to return the html value or it is just created and discarded. The easiest way is to use map instead of forEach

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