1

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

Dale
  • 71
  • 9
  • 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 Mar 17 '20 at 10:30

2 Answers2

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>
Sajeeb Ahamed
  • 3,723
  • 2
  • 14
  • 21
  • 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 – Dale Mar 17 '20 at 10:30
  • 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. – Zdravko Pernikov Mar 17 '20 at 10:32
  • yeah but it's tailwind so there is over 10 classes per state, just trying to clean things up a bit – Dale Mar 17 '20 at 10:34
  • If you want to use a function the follow this https://stackoverflow.com/a/43210575/4610740 – Sajeeb Ahamed Mar 17 '20 at 10:36
  • The problem with that is there is no conditional ``` ActiveLink == 'test' ``` – Dale Mar 17 '20 at 10:40
  • Can't you pass the `ActiveLink` to the method and compare it there? – Zdravko Pernikov Mar 17 '20 at 10:47
  • I could but there is no comparison, if every link has class="someMethod(ActiveLink)" which link gets styled, there is not attachment to the specific link. id love to just do something like ActiveLInk == 'Home' ? active() : inactive() – Dale Mar 17 '20 at 10:58
  • @Dale you have got the right thing. I updated my answer. – Sajeeb Ahamed Mar 17 '20 at 11:38
  • @SajeebAhamed. That solution unfortunately doesn't work either, fails in the build process. – Dale Mar 19 '20 at 06:51
  • @SajeebAhamed, slight adjustment :class="ActiveLink == 'test' ? active() : inactive() " without the { } perfect, thank you – Dale Mar 19 '20 at 07:04
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.

Rijosh
  • 1,380
  • 1
  • 6
  • 10