I'm using Polymer 2.0 and I have a dom-repeat for different to-do cards. What I want to do is remove the card when I click on it.

So I tried this on-tap=deleteNote([[index]]) which uses the index from the dom-repeat. However Polymer doesn't execute the function.

What am I doing wrong?

I'm using Polymer 2.0 and I have a dom-repeat for different to-do cards. What I want to do is remove the card when I click on it.

So I tried this on-tap=deleteNote([[index]]) which uses the index from the dom-repeat. However Polymer doesn't execute the function.

What am I doing wrong?

• javascript
• polymer

4 Answers 4

Another solution could be the dataset object within the event.target. You can define your properties with the data- prefix:

<div on-tap="doSomething" data-item$="[[item]]"></div>

And within your doSomething() listener you can get the dataset object:

doSomething(event) {
  const item = event.target.dataset.item;
  ...
}

You can access the model via the event argument's model property.

So you can access the index from event.model.index.

Well, I am aware you can't. There are many discussions about that on the internet.

Of course, there is a way how to pass argument to function. You can save [[index]] in attribute of element and then get the attribute when needed.

Example:

<div on-tap='_deleteNote' indexed$='[[index]]'>

Then in script:

_deleteNote(e) {
  var index = e.target.getAttribute('indexed');
  ...
}

Once you get index, you can do whatever you want with it.

Don't forget to extend Polymer gestures if you are not using hybrid elements in Polymer 2.0.

class Foo extends Polymer.GestureEventListeners(Polymer.Element) {}

More about it: https://www.polymer-project.org/2.0/docs/devguide/gesture-events#using-gesture-events

What is hybrid element: https://www.polymer-project.org/2.0/docs/devguide/hybrid-elements

on-tap does not appear to be implemented in Polymer 2.0. If you instead use on-click then it will work.

EDIT: see below comment.