I'm building one component and I've got selectItem function for it. I need to pass index to that function. For some reason it works only occasionally.
Here is my template where I'm calling it:
<a aria-selected="true" class="slds-path__link" role="option"
id={itemIndex}
onclick={selectItem}
tabindex={pathItem.tabIndex}
data-item={itemIndex}>
</a>
As you can see I'm using data-item attribute to pass index of that item.
Here is my JS function that I'm using:
selectItem(evt) {
console.log('index: ' + evt.target.dataset.item);
let itemValue = this._pathItemsEnhanced[evt.target.dataset.item].itemValue;
console.log('select item action: ' + itemValue);
}
and here is my console output after clicking on that link several times in row (I was clicking on two links that's why there are outputs with index 3 and 4):
What's wrong with it? Why it doesn't work consistently? I've checked rendered html page and all of those links have proper data-item populated.
here is entire component.
The component itself is made only from html template and javascript.
<template>
<div class="slds-path">
<div class="slds-grid slds-path__track">
<div class="slds-grid slds-path__scroller-container">
<div class="slds-path__scroller" role="application">
<div class="slds-path__scroller_inner">
<ul class="slds-path__nav" role="listbox" aria-orientation="horizontal">
<template
for:each={pathItemsEnhanced}
for:item="pathItem"
for:index="itemIndex">
<template if:true={isSelected} data-item={itemIndex}>
<li class="slds-path__item slds-is-current current slds-is-active" role="presentation"
key={pathItem.itemValue}>
<a aria-selected="true" class="slds-path__link" role="option"
id={itemIndex}
onclick={selectItem}
tabindex={pathItem.tabIndex}
data-item={itemIndex}>
<span class="slds-path__stage">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-path__title">{pathItem.itemValue}</span>
</a>
</li>
</template>
<template if:false={isSelected} data-item={itemIndex}>
<li class="slds-path__item slds-is-incomplete" role="presentation"
key={pathItem.itemValue}>
<a aria-selected="true" class="slds-path__link" role="option"
id={itemIndex}
onclick={selectItem}
tabindex={pathItem.tabIndex}
data-item={itemIndex}>
<span class="slds-path__stage">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-path__title">{pathItem.itemValue}</span>
</a>
</li>
</template>
</template>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
import { LightningElement, track, api } from 'lwc';
export default class Custom_Path extends LightningElement {
_pathItems = [];
_pathItemsEnhanced = [];
_selectedItem;
@api get pathItems() {
return this._pathItems;
}
set pathItems(value) {
this._pathItems = value;
this.setPathItemsEnhanced();
}
@api get selectedItem() {
return this._selectedItem;
}
set selectedItem(value) {
this._selectedItem = value;
}
@api get pathItemsEnhanced() {
return this._pathItemsEnhanced;
}
setPathItemsEnhanced() {
if(this._pathItems !== undefined) {
for(var i = 0; i < this._pathItems.length; i++) {
var item = {
itemValue : this._pathItems[i],
itemIndex : (i === 0) ? '0' : '-1'
};
console.log('Item value: ' + item.itemValue);
console.log('Item index: ' + item.itemIndex);
this._pathItemsEnhanced.push(item);
}
}
}
selectItem(evt) {
console.log('index: ' + evt.target.dataset.item);
let itemValue = this._pathItemsEnhanced[evt.target.dataset.item].itemValue;
console.log('select item action: ' + itemValue);
// this._selectedItem = itemValue;
// const event = new CustomEvent('handleSelect', {
// detail : itemValue
// });
// this.dispatchEvent(event);
}
isSelected(evt) {
console.log('index: ' + evt.target.dataset.item);
var itemValue = this._pathItemsEnhanced[evt.target.dataset.item].itemValue;
console.log('isSelected: ' + itemValue);
for(var j = 0; j <= this._pathItemsEnhanced.length; j++) {
if(this._pathItemsEnhanced[j].itemValue === this._selectedItem) {
return true;
}
if(this._pathItemsEnhanced[j].itemValue === itemValue) {
break;
}
}
return false;
}
}
