如何在Polymer 2.0 on-tap功能中传递参数？

Question

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?

Answer 1

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;
  ...
}

Answer 2

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

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

Answer 3

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

Answer 4

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.