Adding active class :click

Question

I am having trouble adding an active class when clicking a link.

I have the dynamic class setup with a click listener that passes an argument to the function but the class does not update. I am not sure why. The 'Dashboard' link is red when page is refreshed so I know it is working to an extent.

<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="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>

Expecting the background colour of clicked link to change. Only the dashboard link is red and whenever I click anything else, nothing happens.

Shouldn't this.selectedLink === title in your method be this.selectedLink = title instead? — Brandon Franklin
– Brandon Franklin, Commented Jun 19, 2019 at 13:39
Oh, you have both an href and a click event on the b-list-group-item which renders as an anchor tag in the html. Might want to handle route change and active class in the same logic? Also, shoudn't it be @click instead of :click — Brandon Franklin
– Brandon Franklin, Commented Jun 19, 2019 at 13:45
Nice idea @BrandonFranklin however even without the href it is still not changing the background colour. — Prozak
– Prozak, Commented Jun 19, 2019 at 13:52

Brandon Franklin · Accepted Answer · 2019-06-19 13:56:36Z

1

Here is a working example of your code.

I changed the :click to @click and the following.

methods: {
    isActive(title) {
      this.selectedLink = title // Had === before
    }
  }

https://codesandbox.io/s/vue-template-y3k12?fontsize=14

answered Jun 19, 2019 at 13:56

Brandon Franklin

3633 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Prozak Over a year ago

Thank you so much!

Collectives™ on Stack Overflow

Adding active class :click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related