CODEWITHSUNDEEP
javascriptcssvue.js
atx123n
atx123n

Reputation: 53

VueJS Attach active class to li tag not a tag

Hi I want to make the li have a class of active when the /support route is sent. Out of the box active class only applies tot he router-link aka a tag. Thanks!

<ul>
 <li class="nav-item" >
         
                <router-link  to="/support" class="nav-link d-flex align-items-center justify-content-between">
                  <span>
                    <span class="sidebar-icon"
                      ><span class="fas fa-life-ring"></span
                    ></span>
                    Support
                  </span>
                </router-link>
              </li>
            </ul>

Upvotes: 0

Views: 153

Answers (1)

Mohammad Masoudi
Mohammad Masoudi

Reputation: 446

i think you should remove <li> tag and pass tag props to your <router-link>

change your code like this:

<ul>
      <router-link to="/support" tag="li" class="nav-link d-flex align-items-center justify-content-between" active-class="some-active-class" exact>
         <span>
         <span class="sidebar-icon"
            ><span class="fas fa-life-ring"></span
            ></span>
         Support
         </span>
      </router-link>
</ul>

and for style to your active link you can use active-class props

.some-active-class{
 color: red;
}

if you want read more about router-link props see docs : https://router.vuejs.org/api/#router-link-props

Upvotes: 1

Related Questions