在 Polymer 中,如何使用带有值的 <template is="dom-repeat"> 和一个删除自身的按钮来制作元素列表?

in Polymer how do I make a list of elements using <template is="dom-repeat"> with values and a button to delete itself?

我用来在纸卡上显示数组中的每个对象。但我也希望能够在每个对象旁边都有一个纸按钮,一旦您按下它,它就会从数组中删除该对象。 (这一切都在自定义元素中)我无法使用以下代码实现此目的:

我的-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;
    });
}

我也试过使用这样的匿名内联函数:

<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>

但这也没有用。我做错了什么或者这些不是实现我正在寻找的东西的有效选择?

您尝试比较元素,这通常不是最佳做法。 尝试根据唯一 id/number 删除它们,例如:

<paper-button on-click="deleteItem" unique-id=[[item.id]]>delete</paper-button>
deleteItem(o) {
    this.tafels = this.tafels.filter(function(e) {
        return e.uniqueId !== o.currentElement.uniqueId;
    });
}

此外,您似乎使用 'items' 作为 dom-repeat 的输入,而在编辑时使用 'tafels'。这两个应该是一样的。