How to pass values to the function on click event, in polymer-3.x?

Question

I am looping an array of objects. each object has name and address for example. On click event, i want to send the clicked name to the function. Example: on-click="myFunc('[[item.name]]')"

My current code:

static get template() {
  ...
  <template is="dom-repeat" items="[[users]]">
      <a name="[[item.name]]" on-click="myFunc">[[item.name]]</a>
  </template>
}

myFunc(name) {
  console.log('Clicked name is ', name);
}

How to get the clicked name in the function myFunc ??

Answer 1

The easiest way is to use the API:

When you add a declarative event handler inside the dom-repeat template, the repeater adds a model property to each event sent to the listener. The model object contains the scope data used to generate the template instance, so the item data is model.item

Using that information, you can access your item using

myFunc(event) {
  const name = event.model.item.name;
  console.log('Clicked name is', name);
}