CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Jay Robertson
Jay Robertson

Reputation: 43

How to toggle classes between two tabs on click in Vue.js

I have spans and I want to make so that when I click on one tab the clicked tab changes it's color to red and the other one remains gray. I am trying to achieve this with using class binding but nothing happens for now, how can I fix it so that it starts changing the classes?

here is my logic:

<template>
    <div class="left-side-tabs">
        <span  :class="[ isClicked ? '.active' : 'normal' ]" @click="toggle()">Shares Distribution</span>
        <span :class="[ isClicked ? '.active' : 'normal' ]" @click="toggle()">Activity Log</span>
         <br>
         <br>
         <br>
    </div>
</template>

<style lang="scss">
@import "../../variables";

.left-side-tabs {
 margin-left: 93px;
  span {
      padding: 10px;
      font-family: Roboto Slab;
      font-style: normal;
      font-weight: bold;
      font-size: 14px;
      line-height: 18px;
      text-transform: uppercase;

      color: $brainstemGrey;
  }

  span:hover {
      cursor: pointer;
  }
}

.active {
    color:red
}

.normal {
   color: $brainstemGrey;
</style>

<script>
export default {
     data() {
    return {
      isClicked: false
    };
  },
  methods: {
      toggle() {
          this.isClicked = !this.isClicked
      }
  }
}
</script>

Upvotes: 1

Views: 640

Answers (2)

Gbenankpon Arthur
Gbenankpon Arthur

Reputation: 167

Do like this:

 <span  :class="isClicked ? 'active' : 'normal'" @click="toggle()">Shares Distribution</span>

 <span :class="!isClicked ? 'active' : 'normal'" @click="toggle()">Activity Log</span>

Upvotes: 2

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

:class="[isClicked ? 'active' : 'normal' ]"

Note : don't add the . before the class name in your class binding.

The above solution will make the two tabs with the same color, so you should add a property called active and when you click on a tab update that property then add a condition in your class based on the toggled tab index :

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data() {
    return {
      isClicked: false,
      active:-1
    };
  },
  methods: {
    toggle(index) {
      this.active=index
    }
  }
})
.left-side-tabs {
  margin-left: 93px;
}

.left-side-tabs span {
  padding: 10px;
  font-family: Roboto Slab;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 18px;
  text-transform: uppercase;
  color: $brainstemGrey;
}

.left-side-tabs span:hover {
  cursor: pointer;
}

.active {
  color: red
}

.normal {
  color: gray;
}
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">
  <div class="left-side-tabs">
    <span :class="{ active===1 ? 'active' : 'normal' }" @click="toggle(1)">Shares Distribution</span>
    <span :class="{ active===2 ? 'active' : 'normal' }" @click="toggle(2)">Activity Log</span>
    <br>
    <br>
    <br>
  </div>
</div>

Upvotes: 2

Related Questions