в Polymer, как мне сделать список элементов, используя <template is = "dom-repeat"> со значениями и кнопкой для удаления себя? - PullRequest
Новая
       40

в Polymer, как мне сделать список элементов, используя <template is = "dom-repeat"> со значениями и кнопкой для удаления себя?

0 голосов
/ 19 июня 2019

Я использую для отображения каждого объекта в массиве на бумажной карточке. Но я также хочу иметь возможность иметь бумажную кнопку рядом с каждым объектом, который удаляет объект из массива, когда вы его нажимаете. (Это все внутри пользовательского элемента) Я не смог добиться этого с помощью следующего кода:

мой-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>

Но это тоже не сработало. Я делаю что-то не так или это недопустимые варианты для достижения того, что я ищу?

1 Ответ

1 голос
/ 21 июня 2019

Вы пытаетесь сравнить элементы, что, как правило, не лучшая практика.Попробуйте удалить их на основе уникального идентификатора / номера, например: 

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

Рядом с этим вы, кажется, используете «элементы» в качестве входных данных для повторения dom, при использовании «тафелей», когдаредактирования.Эти два должны быть одинаковыми.

...