0

I am using the lightning-vertical-navigation. The navigation items are being rendered dynamically from a list of records, and the selected-item property can be set dynamically by code, rather than (or as well as) by user interaction.

In most circumstances everything is working well. However, on some changes an item is not selected even though the value of the selected-item property does exist as a name for one of the navigation items. I cannot understand why it does it in some circumstances and not others.

<lightning-vertical-navigation
    selected-item={selectedItem}
    onselect={handleSelectItem}>

    <lightning-vertical-navigation-section label="Items">

        <template for:each={items} for:item="item">
            <lightning-vertical-navigation-item-icon
                key={item.Id}
                label={item.Name}
                name={item.Name}
                icon-name="utility:setup">
            </lightning-vertical-navigation-item-icon>
        </template>
    </lightning-vertical-navigation-section>
</lightning-vertical-navigation>
2
  • What is in your handleSelectItem? Is the issue only happening with user-selected items? Aug 16, 2021 at 14:41
  • @KrisGoncalves No, it is happening I think when the items are dynamically change, even though the selectedItem value does match the item.Name of one of the items.
    – lemming
    Aug 17, 2021 at 15:46

1 Answer 1

0

I've solved my bug. I thought I'd post this here just in case it helps someone else.

When my items data changed dynamically, the item.Name property might change to something different for an item record. But, the item.Id which I was using as the key in the for:each loop would remain the same.

So, my issue was simply that the for:each loop wasn't re-rendering as expected because the item.Id that I was using as the key wasn't changing.

As soon as I changed the key to use item.Name, the for:each loop re-rendered when the name of an item changed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.