I use to display every object in an Array on a paper-card. But I also want to be able to have a paper-button next to every object that deletes the object from the Array once you press it. (This is all inside a custom element) I haven't been able to achieve this with the following code:
my-element.js:
<template is="dom-repeat" items="{{items}}" as="item">
<paper-card>
<div>Item [[item.number]]
<paper-button on-click="deleteItem">delete</paper-button></div>
</paper-card>
</template>
deleteItem(o) {
const item = o.model.item;
this.tafels = this.tafels.filter(function(e) {
return e !== item;
});
}
I've also tried using an anonymous inline function like this:
<template is="dom-repeat" items="{{items}}" as="item">
<paper-card>
<div>Item [[item.number]]
<paper-button on-click="(function(){console.log('deleted')})();">delete</paper-button></div>
</paper-card>
</template>
But that didn't work either. Am I doing something wrong or are these not valid options to achieve what I'm looking for?