fix(VListItem): color doesn't apply for active route (vuetifyjs#9285)

Tofandel · Sep 28, 2021 · af3be8e · af3be8e
1 parent 5bce957
commit af3be8e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/packages/vuetify/src/components/VList/VListItem.sass b/packages/vuetify/src/components/VList/VListItem.sass
@@ -6,7 +6,7 @@
     color: map-deep-get($material, 'text', 'disabled')
 
   &:not(.v-list-item--active):not(.v-list-item--disabled)
-    color: map-deep-get($material, 'text', 'primary') !important
+    color: map-deep-get($material, 'text', 'primary')
 
   .v-list-item__mask
     color: map-deep-get($material, 'text', 'disabled')
@@ -265,3 +265,4 @@
     -webkit-line-clamp: 2
     -webkit-box-orient: vertical
     display: -webkit-box
+
diff --git a/packages/vuetify/src/components/VList/VListItem.ts b/packages/vuetify/src/components/VList/VListItem.ts
@@ -150,6 +150,10 @@ export default baseMixins.extend<options>().extend({
 
       return attrs
     },
+    toggle () {
+      this.isActive = !this.isActive
+      this.$emit('change')
+    },
   },
 
   render (h): VNode {
@@ -182,6 +186,6 @@ export default baseMixins.extend<options>().extend({
       })
       : this.$slots.default
 
-    return h(tag, this.setTextColor(this.color, data), children)
+    return h(tag, this.isActive ? this.setTextColor(this.color, data) : data, children)
   },
 })
diff --git a/packages/vuetify/src/mixins/routable/index.ts b/packages/vuetify/src/mixins/routable/index.ts
@@ -75,6 +75,10 @@ export default Vue.extend({
     $route: 'onRouteChange',
   },
 
+  mounted () {
+    this.onRouteChange()
+  },
+
   methods: {
     click (e: MouseEvent): void {
       this.$emit('click', e)
@@ -145,11 +149,13 @@ export default Vue.extend({
 
       this.$nextTick(() => {
         /* istanbul ignore else */
-        if (getObjectValueByPath(this.$refs.link, path)) {
+        if (!getObjectValueByPath(this.$refs.link, path) === this.isActive) {
           this.toggle()
         }
       })
     },
-    toggle: () => { /* noop */ },
+    toggle () {
+      this.isActive = !this.isActive
+    },
   },
 })