v-link-active on parent containing multiple v-links is not working

[tooblue]

Vue.js & vue-router.js version

1.0.26, 0.7.13

Reproduction Link

http://jsfiddle.net/oenkitt/zzvbndza/

Steps to reproduce

Here is the basic structure of my navigation menu:

<ul>
    <li v-link-active>
        <a v-link>Top level menu item</a>
        <ul>
            <li><a v-link>Sub menu item 1</a></li>
            <li><a v-link>Sub menu item 2</a></li> <!-- This one works -->
        </ul>
    </li>
</ul>

What is Expected?

The "v-link-active" class should be applied to the parent element when any of the child "v-links" match the current route.

What is actually happening?

The "v-link-active" class is only applied to the parent element when the last child element matches the current route.

In my example on jsFiddle, the "v-link-active" class should be applied to the "Leads" menu item if any of the contained sub-menu items ("Overview" or "Profiles") match the current route. Currently, this only works when the last sub-menu item ("Profiles") is active, but does not work when "Leads" or "Overview" are active.

[reefki]

Same issue with subRoutes.

https://jsfiddle.net/reefki/aajfn39w/

[cybertino]

With this bug the class is only added when last child is selected. This is because each link either adds activeClass or removes from the parent(s) if the link is not active. In the example links share the same class name so active link adds the class and inactive removes it.

These are the key places in the code:

https://github.com/vuejs/vue-router/blob/dev/src/directives/link.js#L40
https://github.com/vuejs/vue-router/blob/dev/src/directives/link.js#L196

[simplesmiler]

@tooblue you should not rely on highlighting parent state with v-link-active, and instead use sub routes and inexact matching mode, the way @reefki has suggested.

Although as spotted by @reefki, there appears to be issue, and v-link-active appears to behave erratically when used with nested links.

[tooblue]

@simplesmiler I'm not sure why sub routes would matter in the context of this bug? v-link-active should work with or without sub routes according to the documentation.

[simplesmiler]

@tooblue with subroutes multiple DOM-nested links can be "active" at the same time (with inexact matching).

Documentation is correct, but implementation is not. I will give it a whirl the next week, once I get back from vacation.

[tooblue]

It seems like the problem described by @tejitak here is possibly still an issue?

It does not work when multiple link directives have a same v-link-active parent because the updates triggered on last v-link directive overrides the v-link-active.

@simplesmiler Yes, but subroutes are not suitable for all applications. In my case, I simply want to visually style a group of arbitrary links which don't necessarily implement nested routes or components. This is a valid use case and seems to be something that adding v-link-active inline is intended to solve:

Sometimes we may want the active classes to be applied to a wrapping element rather than the element itself. You can do so by adding v-link-active to a parent element:

<ul>
  <li v-link-active>
    <a v-link="{ path: '/xxx' }">Go</a>
  </li>
</ul>

v-link will locate the closest parent element that has v-link-active and apply the active classes on that element instead.

[simplesmiler]

I always thought of v-link-active as a way to style parent instead of the link itself, e.g. to color a bullet of a list you need to apply styles to <li>, but v-link should be on the <a>.

[franciscolourenco]

+1?