Vue中点击链接无法添加active类的问题求助

我帮你排查出几个关键问题，修改后应该就能实现点击切换背景色的效果了：

1. 点击事件绑定错误 #

你在模板里用了:click，但Vue中绑定事件需要用@click（或者完整写法v-on:click），:click是用来绑定属性的，所以你的点击事件根本没触发，自然不会更新selectedLink的值。

2. 方法逻辑错误 #

你的isActive方法里只是做了相等判断this.selectedLink === title，但没有给selectedLink赋值——这就相当于只做了个对比，没改变任何状态。应该改成赋值操作，把点击的链接标题赋值给selectedLink。

3. 阻止默认跳转（可选但推荐） #

因为你给b-list-group-item加了:href="#"，点击时浏览器会触发默认的锚点跳转行为，可能会导致页面滚动或者意外的刷新，所以建议给点击事件加上.prevent修饰符来阻止默认行为。

修正后的完整代码 #

<template>
  <b-list-group>
    <b-list-group-item
      v-for="(link, index) in menu"
      :key="index"
      :href="link.sectionId"
      :class="{active: link.title === selectedLink}"
      @click.prevent="isActive(link.title)"
    >
      {{link.title}}
    </b-list-group-item>
  </b-list-group>
</template>

<script>
export default {
  data() {
    return {
      selectedLink: 'Dashboard',
      menu: [
        { title: 'Dashboard', icon: labStuffs, sectionId: '#' },
        { title: 'Lactose intolerance', icon: labStuffs, sectionId: '#' }
      ]
    }
  },
  methods: {
    isActive(title) {
      this.selectedLink = title
    }
  }
}
</script>

<style scoped lang="scss">
.active {
  background-color: red;
}
</style>

为什么页面刷新时Dashboard是红色的？ #

因为你初始化selectedLink的值就是'Dashboard'，所以页面加载时，第一个链接的link.title === selectedLink条件成立，active类被正确添加，这部分逻辑是没问题的。

内容的提问来源于stack exchange，提问作者Prozak