Currently, I am working on setting an active/inactive link state in a navbar that is created using tailwind. To accomplish this, I am passing a prop based on the url (ActiveLink).
The goal is to implement something like the following:
<a href="/test" :class="{active(): ActiveLink == 'test', inactive(): ActiveLink !='test' }">Test</a>
<a href="/test2" :class="{active(): ActiveLink == 'test2', inactive(): ActiveLink !='test2' }">Test</a>
where the active/inactive methods return the necessary classes to be applied instead of manually specifying them like 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 believe that I may be taking the wrong approach with :class= but I haven't been able to discover a suitable alternative yet.