I'm fairly new to LWC coming from Aura. This may be a simple question.
I have a list on my main component with child-component items. Clicking these, sets another child-component (selectedTask). I need to add .slds-is-selected class to the LI element when firing the onSelect event on the component, and removing it when selecting another. My problem is identifying the LI item from the event and key, as well as adding and removing the class.
<template>
<div class="slds-grid slds-gutters">
<template if:true={_wiredCaseResult.data}>
<lightning-card title='Sagsopgaver' style="width:300px" icon-name="standard:product_required" class="slds-m-left--small slds-m-right--small">
<lightning-layout class="slds-var-m-around_medium">
<template if:true={_wiredTaskResult.data}>
<ul class="slds-list--vertical slds-has-cards slds-has-block-links--space slds-has-list-interactions">
<template for:each={_wiredTaskResult.data} for:item="task">
<li key={task.Id} class="slds-list__item">
<c-production-task-list-item task={task}
onselect={handleSelect}></c-production-task-list-item>
</li>
</template>
</ul>
</template>
</lightning-layout>
</lightning-card>
</template>
<template if:true={selectedTask}>
<c-production-task-details style="width:100%" class="slds-m-right--small" task={selectedTask} onupdate={updateHandler}>
</c-production-task-details>
</template>
</div>
</template>
handleSelect(event) {
const taskId = event.detail;
this.selectedTask = this._wiredTaskResult.data.find(
(task) => task.Id === taskId
);
}
Edit: added more code
Edit 2: I ended up with this solution in the eventhandler
handleSelect(event) {
// handle selected class on list items
var _listItem = event.currentTarget.parentNode; // this is the <LI>
var _listItems = _listItem.parentNode.childNodes; // this is every <LI> in the <UL>
for (var i = 0; i < _listItems.length; i++) {
_listItems[i].classList.remove("slds-is-selected");
}
_listItem.classList.add("slds-is-selected");
const taskId = event.detail;
this.selectedTask = this._wiredTaskResult.data.find(
(task) => task.Id === taskId
);
}
lwc:dom="manual"
tag. It's not recommended for your use case.