Vue.js setting classes via method based on conditional

Question

I'm trying to set and active/inactive link state in a navbar built with tailwind. I'm sending a prop based on the url (ActiveLink).

What i'm trying to achieve is something like this:

<a href="/test" :class="{active(): ActiveLink == 'test', inactive(): ActiveLink !='test' }">Test</a>
<a href="/test2" :class="{active(): ActiveLink == 'test2', inactive(): ActiveLink !='test2' }">Test</a>

with active/inactive methods returning the classes that need to be applied Instead of printing this

<a href="/test" class="active">Test</a>

active() {
   return "px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700"
},
inactive() {
   return "mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"
}

I think i'm heading down the wrong path with :class= but can't seem to find the right alternative

Is it possible in your case to have a function that handles the printing of your Navigation? You can have an array with objects which will represent your navigation and structure. When you map over that Array and print the nav items you can set the class based on a check. In your case, if the prop matches. How does this sound to you? — Georgi Grigorov
– Georgi Grigorov, Commented Mar 17, 2020 at 10:30

Rijosh · Accepted Answer · 2020-03-17 10:52:26Z

0

You can use multiple conditions for binding class as follows

<a href="/test" :class="ActiveLink == 'test' ?'active':'inactive'">Test</a>

Or

<a href="/test" :class="[{active: ActiveLink == 'test'}, {inactive: ActiveLink !='test' }]">Test</a>

Note that Vue.js using objects for binding classes. So in order to use multiple classes with multiple conditions, we can use array of class objects.

answered Mar 17, 2020 at 10:52

Rijosh

1,5641 gold badge9 silver badges13 bronze badges

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

Comments

Sajeeb Ahamed · Accepted Answer · 2020-03-19 08:27:19Z

0

The same condition need not write twice. Just put active class when it needs, keep it blank otherwise.

<a href="/test" :class="{'active': ActiveLink == 'test'}">Test</a>

Update

After surfing your comments here I make changes for your requirement-

<a href="/test" :class="ActiveLink == 'test' ? active() : inactive()">Test</a>

edited Mar 19, 2020 at 8:27

answered Mar 17, 2020 at 10:28

Sajeeb Ahamed

6,4382 gold badges23 silver badges36 bronze badges

10 Comments

Dale Over a year ago

I need active to be a function ` active() { return "p-4 mb-1 text-red-100 etc etc" } ` I do need inactive as it should return a different set of classes

dako Over a year ago

For the record you can add multiple classes like this :class="{ 'class1 class2' : condition }". If you need different ones depeding on different stuff in your code, you can call a method :class="someMethod()" and return the classes based on your conditions.

Dale Over a year ago

yeah but it's tailwind so there is over 10 classes per state, just trying to clean things up a bit

Sajeeb Ahamed Over a year ago

If you want to use a function the follow this stackoverflow.com/a/43210575/4610740

Dale Over a year ago

The problem with that is there is no conditional ``` ActiveLink == 'test' ```

|

Collectives™ on Stack Overflow

Vue.js setting classes via method based on conditional

2 Answers 2

Comments

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related