Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug Report][2.5.8] Color prop is not working for v-list-item

See original GitHub issue

Environment

Vuetify Version: 2.5.8 Vue Version: 2.6.14 Browsers: Chrome 93.0.4577.82 OS: Windows 10

Steps to reproduce

Create some v-list-items with to prop.
Set the color in v-list-item.
The color prop is not working. v-list-item color is not changed when it is in active state.

According to the docs it should change the color, when it is in the active state: https://vuetifyjs.com/en/api/v-list-item/#props-color

Expected Behavior

Color should change to the selected one when v-list-item is in the active state.

Actual Behavior

Color is not changed from the default one when v-list-item is in the active state.

Reproduction Link

https://codepen.io/mikilll94/pen/MWoBjLr

Issue Analytics

State:
Created 2 years ago
Comments:7 (7 by maintainers)

Top GitHub Comments

1reaction

KaelWDcommented, Sep 26, 2021

Router-link active doesn’t set isActive, the color class was always applied then overridden by :not(.v-list-item--active)

1reaction

Mikilll94commented, Sep 26, 2021

@yuwu9145 Hello, Thanks for your response. Unfortunately your solution has a bug. You can see it on this GIF: v-list-item-group_bug

When I have selected “Page 2” and I refreshed the page, the “Page 2” item is not highlighted correctly. This bug can only be reproduced locally. You cannot reproduce it on the CodePen because CodePen does not allow you to refresh the page on a certain URL.