Vue JS 在单击项目时添加 class 并在单击同级项目时将其删除

Question

在导航列表中。我在点击时添加了一个 class，当我再次点击时它会消失。它正在将 class 添加到列表的所有项目。我只想在点击时一次激活一个项目。另外，我点击了两个动作（滚动然后添加 class）

<b-navbar class="d-flex flex-column align-items-start>
                    <b-navbar-brand tag="h3" class="m-0">List Index</b-navbar-brand>
                    <b-navbar-nav v-for="(linkItem, index) in linkItems" :key="index">
                        <b-nav-item :class="{ active: isActive }" class="pl-2" @click="scrollTo(`${linkItem.id}`), (isActive = !isActive)">
                            {{ linkItem.title }}
                        </b-nav-item>
                    </b-navbar-nav>
                </b-navbar>

方法是

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

scrollTo { This is working fine},

activeLink() {
            this.isActive = true;
        }

    }
});

我需要帮助使 class 仅应用于活动元素。

谢谢

Answer 1

只需将索引发送到 isActive 状态。

:class="{ 'active': isActive === index }"

点击你必须提供它的索引

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

Vue JS 在单击项目时添加 class 并在单击同级项目时将其删除

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

javascript

class

add

toggle

vue.js