How to send properties to a callback when @click is thrown on lit-element?

Question

I am trying that when the click event is fired on a component in lit-element a callback is executed and it can receive a specific value:

this.list.map(item => html`
  <button @click=${this._handleClick}></button>
`)

_handleClick(e){
console.log(item);
}

How can item be fetched in scope of _handleClick callback?

Answer 1

The easiest thing to do is create a closure for the click handler that captures the item:

this.list.map((item) => html`
  <button @click=${() => this._handleItemClick(item)}></button>
`)

_handleItemClick(item) {
  console.log(item);
}