I am trying to call a function on each element inside of a dom-repeat template.
<dom-repeat items="[[cart]]" as="entry">
<template>
<shop-cart-item id="item"></shop-cart-item>
</template>
</dom-repeat>
...
checkStatus() {
this.$.item.doSomething();
}
How can I call doSomething on each element?
On
You can add an on-tap event in the loop. In order to observe which item you clicked look into model property :
<dom-repeat items="[[cart]]" as="entry">
<template>
<!-- need to give dynamic id for each item in dome-repeat -->
<shop-cart-item id="[[index]]" on-tap = 'checkStatus'></shop-cart-item>
</template>
</dom-repeat>
...
checkStatus(status) {
console.log(status.model) // you can get index number or entry's properties.
this.$.item.doSomething();
}
EDIT:
So as per comment of @Matthew, if need to call a function in one of element's function in dom-repeat first give a dynamic id name as above then:
checkStatus(status) {
this.shadowRoot.querySelector('#'+ status.model.index).doSomething();
}
You can iterate through nodes like: