I have passed in the following data via a prop to a component holding a v-list item component. I have the list rendered along with the link text but for some reason, the links aren't actually functional for some reason. What have I done wrong?
Data:
data() {
return {
categories: [
{
src: 'https://picsum.photos/200',
title: 'Pic 1',
links: [
{ text: 'GOOGLE', url: 'https://www.google.co.uk/' },
{ text: 'Link 2', url: '#' },
{ text: 'Link 3', url: '#' },
{ text: 'Link 4', url: '#' }
]
}
]
};
}
Component:
<template>
<v-row>
<v-col cols="6" md="3" v-for="p in picture" :key="p.id">
<v-hover v-slot:default="{ hover }">
<v-img :src="p.src">
<v-expand-transition>
<div
v-if="hover"
class="transition-fast-in-fast-out red darken-2 v-card--reveal white--text text-center"
style="height: 100%;"
>
<v-list-item-group>
<v-list-item v-for="link in p.links" :key="link.id">
<v-list-item-content>
<v-list-item-title :to="link.url">{{
link.text
}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</div>
</v-expand-transition>
</v-img>
</v-hover>
</v-col>
</v-row>
</template>
In this :to prop refers to a route component declaration and not external urls.
For redirecting to external url you can use something like below.
<v-list-item :href="link.url" target="_blank">{{link.text}}</v-list-item>
Related
I'm using Vuetify 3.0.0-beta.0 ~ for my project (because it is the only version that supports vue3), and having a bit weird issue
I want to implement the same thing as described there https://codepen.io/reijnemans/pen/vYNadMo?editors=1010 with v-select involved, so I was needed to use Vuetify
copied snippet
<v-select
:items="items"
label="Standard"
>
<template v-slot:selection="{ item, index }">
<img :src="item.image">{{ item.name }}</template>
</template>
<template v-slot:item="{ item }">
<img :src="item.image">{{ item.name }}</template>
</v-select>
My Component:
<template>
<div class="resourceSelectors">
<v-col cols="10" lg="4" class="mx-auto">
<div class="text-center">
<h2 class="indigo--text" style="margin-bottom: 30px">Some Test H2</h2>
</div>
<v-col class="d-flex" cols="12" sm="6">
<v-select
:items="items"
label="Standard">
<template v-slot:selection="{ item }">
<img :src="item.image">{{ item.name }}
</template>
<template v-slot:item="{ item }">
<img :src="item.image">{{ item.name }}
</template>
</v-select>
</v-col>
</v-col>
</div>
</template>
<script>
import { mapState } from "vuex";
/* eslint-disable */
export default {
name: "testComponent",
data() {
return {
// hardware Configuration Validation Rules
items: [
{ name: 'Foo', image: 'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG'},
{ name: 'Bar', image: 'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG'},
{ name: 'Hoo', image: 'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG'},
{ name: 'Coo', image: 'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG'}],
}
}}
When I'm trying to run the above component I always get this weird error Failed setting prop "type" on <select>: value text is invalid. TypeError: Cannot set property type of #<HTMLSelectElement> which has only a getter,
Did anyone faced similar issue before?
In Vuetify 3, you need some workarounds to style the items in v-select, because the item slot resets the entire styling.
You should use the menu-props, with it you can pass props through to the v-menu component. It accepts an object with anything from /api/v-menu. This allows you to close the field on click.
In the item slot, you should use a v-list-item with an #click property to set the model.
I made an example here with a selection of symbols:
<script setup>
const symbols = [
'ab-testing',
'abacus',
'account',
'account-alert',
]
const form = { symbol: '', }
</script>
<template>
<v-select
v-model="form.symbol"
:items="symbols"
label="Symbol"
:prepend-inner-icon="'mdi-'+form.symbol"
:menu-props="{
closeOnClick: true,
closeOnContentClick: true,
}"
>
<template v-slot:selection="{ item, index }">
{{ item.value }}
</template>
<template v-slot:item="{ item, index }">
<v-list-item
:title="item.title"
:prepend-icon="'mdi-'+item.title"
#click="form.symbol = item.title"
>
</v-list-item>
</template>
</v-select>
</template>
I hope it helps you.
I couldn't find correct solution but I just wanted to share what I did about scoped slot. I think we should use item.raw to access name and image. And the next problem is how to make it clickable to trigger select event that I didn't know yet :(
const { createApp } = Vue
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = createApp({
data() {
return {
value: null,
items: [
{
name: 'Foo',
image: 'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG'
},
{
name: 'Bar',
image: 'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG'
},
{
name: 'Hoo',
image: 'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG'
},
{
name: 'Coo',
image: 'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG'
}
]
}
}
});
app.use(vuetify).mount('#app');
<link href="https://cdn.jsdelivr.net/npm/vuetify#3.0.0-beta.9/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue#3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#3.0.0-beta.9/dist/vuetify.min.js"></script>
<div id="app">
<div class="resourceSelectors">
<v-col cols="10" lg="4" class="mx-auto">
<div class="text-center">
<h2 class="indigo--text" style="margin-bottom: 30px">Some Test H2</h2>
</div>
<v-col class="d-flex" cols="12" sm="6">
<v-select
v-model="value"
:items="items"
item-title="name"
item-value="name"
label="Standard">
<template v-slot:item="{item}">
<v-list-item
:prepend-avatar="item.raw.image"
:title="item.raw.name"
/>
</template>
</v-select>
</v-col>
</v-col>
</div>
</div>
Im new too nuxtjs and vuex, unfortunately i got some errors trying too fetch my data from vuex;
[Vue warn]: Property or method "products" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
./pages/index.vue
<template>
<div>
<TheCarousel />
<SellingItems
v-for="prod in products"
:key="prod.id"
:id="prod.id"
:image="prod.image"
:name="prod.name"
:price="prod.price"
/>
</div>
</template>
<script>
import TheCarousel from '../components/TheCarousel'
import SellingItems from '../components/sellingItems'
import { mapGetters } from 'vuex'
export default {
components: {
TheCarousel,
SellingItems
},
computed: {
// products(){
// return this.$store.getters['prods/products']
// }
...mapGetters(['prods/products'])
}
}
</script>
./components/sellingItems.vue
<template>
<v-container class="my-5">
<h2>Top Selling Items</h2>
<v-divider class="my-4"></v-divider>
<v-row>
<v-col
sm="6"
md="4"
v-for="product in products"
:key="product.name">
<v-card outlined>
<v-img :src="product.image" height="200px" />
<v-card-title> {{ product.name}} </v-card-title>
<v-card-subtitle> ${{ product.price }}</v-card-subtitle>
<v-card-actions>
<v-btn color="success" outlined to="#">
<v-icon small left> add </v-icon>
Add to Cart
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
props: ['id', 'image', 'name', 'price'],
}
</script>
<style>
</style>
store/modules/product.js
export default {
namsespaced: true,
state(){
return{
products: [
{
id: '1',
name: 'Playstation 4',
price: 200,
image: 'img/ps4.jpg'
},
{
id: '2',
name: 'Playstation 5',
price: 700,
image: 'img/ps5.jpg'
},
{
id: '3',
name: 'Nintendo wii',
price: 100,
image: 'img/wii.jpg'
}
]
}
},
getters: {
products(state){
return state.products;
}
}
}
You are passing in each item's properties into SellingItem but then in selling items, you are looping through products which does not exist in that component. Did you mean to use the passed in properties instead?
To use those passed in properties, reference them the same as if they were defined in data or computed:
<v-row>
<v-col sm="6" md="4">
<v-card outlined>
<v-img :src="image" height="200px" />
<v-card-title> {{name}} </v-card-title>
<v-card-subtitle> ${{price}}</v-card-subtitle>
<v-card-actions>
<v-btn color="success" outlined to="#">
<v-icon small left> add </v-icon>
Add to Cart
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
Your mapGetters is not defined correctly from within index.vue. Try this:
...mapGetters('products', ['products'])
And you would reference it like this.products.
The namespace would only be needed, from my understanding, if this Vuex store were nested in a parent store or if the getter was being called from within another Vuex store. For your example, calling with namespace from within a separate Vuex store's action would look like: const value = context.rootGetters['products/products']
Having said all of that, if your getter just returns the state item itself without any other logic, you might as well call the state item directly instead of going through a getter.
Working with Vuetify and have problem with the submenu to a a dropdown menu.
Everything works as it should, except for the main dropdown menu that does not closes when click on a submenu item. The submenu closes as it should.
1. The dropdown menu open on click
2. The submenu open on hover
3. If I click on a main menu item, the whole menu close. I want it to stay open as I don't have any router link for the main menu items, only for the submenu items.
4. If I click on a submenu item, I get routed to the new page, but the main menu does not close, only the submenu. Have to click a second time outside the dropdown box to close it.
I have tried with "close-on-click" and "close-on-content-click" without sucsess.
<v-menu offset-y :close-on-select="true">
<v-btn flat slot="activator">
<v-icon left>expand_more</v-icon>
<span>Our Adventures</span>
</v-btn>
<v-list class="py-0">
<v-list-tile>
<router-link to="/adventures">
<v-list-tile-title class="black--text plain-text">All our adventures</v-list-tile-title>
</router-link>
</v-list-tile>
</v-list>
<v-list v-for="item in items" :key="item.title" class="text-xs-left py-0">
<v-menu offset-x right open-on-hover>
<v-list-tile slot="activator">
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
<v-list dense>
<v-list-tile
v-for="subItem in item.items"
:key="subItem.title"
#click="close"
router
:to="subItem.link"
>
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-list>
</v-menu>
and the related script
items: [
{
title: "Nordic skating",
items: [
{ title: "Open tour", link: "/adventures/skating/weekend" },
{ title: "Private tour", link: "/adventures/skating/private" }
]
},
{
title: "Kayak",
items: [
{ title: "Open tour", link: "/adventures/kayak/weekend" },
{ title: "Private tour", link: "/adventures/kayak/private" }
]
},
{
title: "Hiking",
items: [
{ title: "Open tour", link: "/adventures/hiking/eightdays" },
{ title: "Private tour", link: "/adventures/hiking/private" }
]
},
{
title: "Cross country skiing",
items: [
{ title: "Open tour", link: "/adventures/skiing/weekend" },
{ title: "Private tour", link: "/adventures/skiing/private" },
{
title: "Winter adventures",
link: "/adventures/skiing/adventures"
}
]
}
],
Solved the issue of parentMenu not closing by using ref and the isActive property.
Steps:
Add ref = "parentMenuRef" to the parent v-menu
In the childMenu items, add #click="$refs.parentMenuRef.isActive = false"
This will close the parentMenu along with the childMenu when the childMenu item is clicked. Original answer
Remove the "open-on-hover" then it will work as it should be. Open-on-hover gives effect close window on 2 time click. I had same issue and no success. I would suggest you to custom menu instead of Vuetify menu.
You have not mentioned Vuetify version, but I assume it's 1.x.
Here's what I have done in my projects:
In top level v-menu, close-on-content-click="true". This prop is true by default, so, you don't need to add it.
The inner v-menu will have open-on-hover, which you code already has.
Moved the slot="activator" to a template.
On the activator of inner v-menu, I have added #click.stop.prevent
So, your code should look like:
<v-menu offset-y>
<v-btn flat slot="activator">
<v-icon left>expand_more</v-icon>
<span>Our Adventures</span>
</v-btn>
<v-list class="py-0">
<v-list-tile>
<router-link to="/adventures">
<v-list-tile-title class="black--text plain-text">All our adventures</v-list-tile-title>
</router-link>
</v-list-tile>
</v-list>
<v-list v-for="item in items" :key="item.title" class="text-xs-left py-0">
<v-menu offset-x right open-on-hover>
<template slot="activator">
<v-list-tile
#click.stop.prevent
>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
<template>
<v-list dense>
<v-list-tile
v-for="subItem in item.items"
:key="subItem.title"
#click="close"
router
:to="subItem.link"
>
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-list>
</v-menu>
Side Note: slot attribute is deprecated in Vue 2.6. Please consider using v-slot directive. https://v2.vuejs.org/v2/guide/components-slots.html
I am using Vuetify in my vue app and need to give HTML tags in my tick labels, I checked Vuetify doc but found it accepts string and in case we pass HTML, it renders it as string. Is there a way we can inject HTML in tick labels. Here is what I have tried:
Codepen link here: https://codepen.io/vishalgulati/pen/gOYyMza?&editable=true&editors=101
<div id="app">
<v-app id="inspire">
<v-card flat color="transparent">
<v-subheader>Tick labels</v-subheader>
<v-card-text>
<v-slider
v-model="fruits"
:tick-labels="ticksLabels"
:max="3"
step="1"
ticks="always"
tick-size="2"
></v-slider>
</v-card-text>
</v-card>
</v-app>
</div>
new Vue({
el: '#app',
data () {
return {
value: 0,
fruits: 0,
ticksLabels: [
'<span> </span>',
'',
'Pear',
'Apple'
]
}
}
})
Use template slot for thumb-label. Found in their documents:
<div id="app">
<v-app id="inspire">
<v-row>
<v-col class="pa-12">
<v-range-slider
:tick-labels="seasons"
:value="[0, 1]"
min="0"
max="3"
ticks="always"
tick-size="4"
>
<template v-slot:thumb-label="props">
<v-icon dark>
{{ season(props.value) }}
</v-icon>
</template>
</v-range-slider>
</v-col>
</v-row>
</v-app>
</div>
...
data: () => ({
seasons: [
'Winter',
'Spring',
'Summer',
'Fall',
],
icons: [
'mdi-snowflake',
'mdi-leaf',
'mdi-fire',
'mdi-water',
],
}),
methods: {
season (val) {
return this.icons[val]
},
},
})
source: https://vuetifyjs.com/en/components/sliders#custom-range-slider
codepen: https://codepen.io/pen/?&editable=true&editors=101
Like the title says, I'm trying to have a navigation drawer that has expandable sub-menus for certain options. Like a "User Profile" main menu option might have a the sub-menus "Update Contact Details" and "Review Registration".
I've tried this a handful of ways, basically coming down to the same two issues. Because each menu options is a list-tile, either the sub-menu gets stacked on the right of it (as in, the entire sub-menu is in the same tile), or the entire list of menu options has these drop down icons, when only a single menu option actually has a sub-menu. Additionally, my second code snippet below also stops you from navigating to any of the main menu links, which is not what is wanted.
Example 1, where the sub-menu is stuck in the same tile as the main menu option.
<div v-for="(link, i) in links" :key="i">
<v-list-tile v-if="!link.subLinks" :to="link.to" :active-class="color" avatar class="v-list-item">
<v-list-tile-action>
<v-icon>{{ link.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-title v-text="link.text"/>
</v-list-tile>
<div v-else>
<v-list-tile avatar class="v-list-item">
<v-list-tile-action>
<v-icon>{{ link.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-title v-text="link.text"/>
<v-list-group>
<v-list-tile sub-group v-for="(subLink, j) in link.subLinks" :key="j" :to="subLink.to" :active-class="color" avatar class="v-list-item">
<v-list-tile-title v-text="subLink.text"/>
</v-list-tile>
</v-list-group>
</v-list-tile>
</div>
</div>
Example 2, where each menu option has a drop down arrow, even ones that don't have any sub-menus.
<v-list-group v-for="(link, i) in links" :key="i" :prepend-icon="link.icon" :to="link.to" :active-class="color" avatar class="v-list-item">
<template v-slot:activator>
<v-list-tile>
<v-list-tile-title>{{ link.text }}</v-list-tile-title>
</v-list-tile>
</template>
<v-list-tile v-for="(subLink, j) in link.subLinks" :key="j" :to="subLink.to" :active-class="color">
<v-list-tile-content>
<v-list-tile-title>{{ subLink.text }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-group>
This is a sample of the data I'm using
links: [
{
to: '/',
icon: 'mdi-view-dashboard',
text: 'Dashboard',
},
{
icon: 'mdi-account',
text: 'User Profile',
subLinks: [
{
to: '/update-contact',
text: 'Update Contact Details',
},
{
to: '/review-registration',
text: 'Review Registration',
},
],
},
],
What I'd like to be able to do is have a main menu, with the option of adding sub-menus as I see fit. Unfortunately, I can't seem to figure out how to mix and match the list-group and list-tile to get what I want done. I'm super grateful for any help provided. Thanks.
I was looking to do the same thing, here's how I solved it.
Data:
links: [
{
to : '/dashboard',
icon : 'mdi-view-dashboard',
text : 'Dashboard',
},
{
icon : 'mdi-tennis',
text : 'Players',
subLinks : [
{
text : 'Players list',
to : '/players',
},
{
text : 'Import WTA Players',
to : '/players/import',
},
]
},
{
to : '/tournaments',
icon : 'mdi-trophy',
text : 'Tournaments',
},
]
Template:
<v-list>
<div v-for="(link, i) in links">
<v-list-tile
v-if="!link.subLinks"
:key="i"
:to="link.to"
:active-class="color"
avatar
class="v-list-item"
>
<v-list-tile-action>
<v-icon>{{ link.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-title v-text="link.text" />
</v-list-tile>
<v-list-group
v-else
:key="link.text"
no-action
>
<template v-slot:activator>
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title>{{ link.text }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
<v-list-tile
v-for="sublink in link.subLinks"
:to="sublink.to"
:key="sublink.text"
>
<v-list-tile-title v-text="sublink.text" />
</v-list-tile>
</v-list-group>
</div>
</v-list>
I'm sorry but I don't have time to make a pen. Hope this helps !
I don't have enough reputation to add a comment but this will give you a bit of a better layout and function correctly (in the one posted above links didn't work for some reason and the naming was a bit off)
<template>
<v-navigation-drawer
app
clipped
permanent
mini-variant
expand-on-hover>
<!-- -->
<v-list nav dense>
<div v-for="(link, i) in links" :key="i">
<v-list-item
v-if="!link.subLinks"
:to="link.to"
:active-class="color"
avatar
class="v-list-item"
>
<v-list-item-icon>
<v-icon>{{ link.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title v-text="link.text" />
</v-list-item>
<v-list-group
v-else
:key="link.text"
no-action
:prepend-icon="link.icon"
:value="false"
>
<template v-slot:activator>
<v-list-item-title>{{ link.text }}</v-list-item-title>
</template>
<v-list-item
v-for="sublink in link.subLinks"
:to="sublink.to"
:key="sublink.text"
>
<v-list-item-icon>
<v-icon>{{ sublink.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ sublink.text }}</v-list-item-title>
</v-list-item>
</v-list-group>
</div>
</v-list>
</v-navigation-drawer>
</template>
<script>
export default {
data: () => ({
links: [
{
to : '/dashboard',
icon : 'mdi-view-dashboard',
text : 'Dashboard',
},
{
icon : 'mdi-folder',
text : 'Templates',
subLinks : [
{
text : 'View Templates',
to : '/templates',
icon : 'mdi-view-list'
},
{
text : 'New Template',
to : '/templates/new',
icon : 'mdi-plus'
},
]
},
{
icon : 'mdi-application',
text : 'Applications',
subLinks : [
{
text : 'View Applications',
to : '/apps',
icon : 'mdi-view-list'
},
{
text : 'New Application',
to : '/apps',
icon : 'mdi-plus'
},
]
},
]
})
}
</script>
<style scoped>
.v-application--is-ltr .v-list--dense.v-list--nav .v-list-group--no-action > .v-list-group__items > .v-list-item {
padding: 0 8px;
}
</style>
Hope this can help.
Basically, the menu on the navigation drawer component (v-navigation-drawer) using the list component (v-list).
From the documentation, you can find a way to add submenu on list component
on the part of nested list
Cheers,
This is three level category list item with navigation-drawer. This is actually find vuetify list section. then i modified this with three level item. You can extend and also optimized code. Just for example I write raw code.
<v-navigation-drawer
v-model="drawer"
:clipped="clipped"
fixed
app
>
<v-list nav dense>
<v-list-item
to="/"
>
<v-list-item-icon>
<v-icon>mdi-home</v-icon>
</v-list-item-icon>
<v-list-item-title>Home</v-list-item-title>
</v-list-item>
<!--Main category list-->
<v-list-group
v-for="item in items"
:value="true"
prepend-icon="mdi-food-apple"
no-action
>
<template v-slot:activator>
<v-list-item-title>{{item.name}}</v-list-item-title>
</template>
<!--Sub category item-->
<!--if 2nd lvl child available-->
<v-list-group
v-if="subItem.children.length > 0"
v-for="subItem in item.children"
:value="true"
sub-group
>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title>{{subItem.name}}</v-list-item-title>
</v-list-item-content>
</template>
<!--subsubitem category list-->
<v-list-item v-for="subSubItem in subItem.children"
:to="'/category/'+subSubItem.slug">
<v-list-item-icon>
<v-icon></v-icon>
</v-list-item-icon>
<v-list-item-title>{{subSubItem.name}}</v-list-item-title>
</v-list-item>
</v-list-group>
<!--if not 2nd lvl child available-->
<v-list-item :to="'/category/'+subItem.slug" v-for="subItem in
item.children">
<v-list-item-icon>
<v-icon></v-icon>
</v-list-item-icon>
<v-list-item-title>{{subItem.name}}</v-list-item-title>
</v-list-item>
</v-list-group>
</v-list>
</v-navigation-drawer>
DATA:
[
{
"id": 1,
"name": "Food",
"slug": "food",
"children": [
{
"id": 2,
"name": "Fruits & Vegetables",
"slug": "fruits-vegetables",
"children": [
{
"id": 3,
"name": "Fresh Fruits",
"slug": "fresh-fruit",
"children": []
},
{
"id": 4,
"name": "Fresh Vegetables\r\n",
"slug": "fresh-vegetable",
"children": []
}
]
},
{
"id": 5,
"name": "Breakfast",
"slug": "breakfast",
"children": [
{
"id": 6,
"name": "Local Breakfast",
"slug": "local-breakfast",
"children": []
}
]
}
]
},
{
"id": 7,
"name": "Home & Cleaning",
"slug": "home-cleaning",
"children": [
{
"id": 8,
"name": "Air Fresheners",
"slug": "air-freshners",
"children": []
},
{
"id": 9,
"name": "Cleaning Supplies",
"slug": "cleaning-supplies",
}
]
}
]
I just found a way to set the submenu active-class. Hope it can help others.
thanks to VueJS-Linusborg.
<template>
......
<v-list-group
v-else
:key="link.text"
no-action
:prepend-icon="link.icon"
:value="subIsActive('/parentroute')"
>
<template v-slot:activator>
<v-list-item-title>{{ link.text}}</v-list-item-title>
</template>
<v-list-item
v-for="sublink in link.subLinks"
:to="sublink.to"
:key="sublink.text"
:active-class="`success white--text`"
>
<v-list-item-icon>
<v-icon>{{ sublink.icon }}</v-icon>
</v-list-item-icon>
<-list-item-title>{{ sublink.text}}</v-list-item-title>
</v-list-item>
</v-list-group>
...
</template>
<script>
...
methods:{
subIsActive(input) {
const paths = Array.isArray(input) ? input : [input];
return paths.some((path) => {
return this.$route.path.indexOf(path) === 0; // current path starts with this path
string
});
},
....
}</script>