Vue JS add a class when an item is clicked and remove it when a sibling item is clicked-CodePudding

In a navigation list. I am having a class added on click, and it goes a way when I click again. It is adding the class to all the items of the list. I just wish to make one item active at a time on Click. Also, I have a click with two actions ( Scroll and then add a class)

<b-navbar h3" >List Index</b-navbar-brand>
                    <b-navbar-nav v-for="(linkItem, index) in linkItems" :key="index">
                        <b-nav-item :  @click="scrollTo(`${linkItem.id}`), (isActive = !isActive)">
                            {{ linkItem.title }}
                        </b-nav-item>
                    </b-navbar-nav>
                </b-navbar>

And the methods are

data() {
        return {
            isActive: false,
            linkContent: [] as any
        };
    },

scrollTo { This is working fine},

activeLink() {
            this.isActive = true;
        }

    }
});

I need help making the class only apply to the active element.

Thanks

CodePudding user response：

Just send index to isActive state.

With click you must provide it's index

@click="scrollTo(`${linkItem.id}`), (isActive = index)"