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-section label="Items">

        <template for:each={items} for:item="item">
  • 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


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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .