CODEWITHSUNDEEP
vue.js
user17504907
user17504907

Reputation:

I want to add active class on the button that got clicked and remove from the another button, vice versa in vue js

I want to add an active class while the first button is clicked and remove the active class if it's there in the second button same condition for the second button how can I achieve it.

<button
            :class="{ active: isActiveAc, sortas: true }"
            @click="sortUp()"
          >
            Price low to Hight
          </button>
          <button
            :class="{ active: isActiveDc, sortas: true }"
            @click="sortDown()"
          >
            Price Hight to Low
          </button>

Upvotes: 0

Views: 722

Answers (1)

Nexo
Nexo

Reputation: 2331

I would like to give you a basic idea which might help you.

<button :class="{ active: isActiveAc, sortas: true }"@click="sortUp(),setFalse(1)>Price low to Hight</button>
<button:class="{ active: isActiveDc, sortas: true }"@click="sortDown(),setFalse(1)">Price Hight to Low</button>

and add the following function in a method.

setFalse(c) {
      if (c == 1) {
        this.isActiveAc = true;
        this.isActiveDc = !this.isActiveAc;
      } else if (c == 2) {
        this.isActiveDc = true;
        this.isActiveAc = !this.isActiveDc;
      }
    },

Upvotes: 1

Related Questions