Vue, vuetify, list-item-group component: how to bind active list-item?

Question

Vue.js

Hello.

I am trying to create a sidebar component using vue/vuetify. The component contains a list, which in turn contains the v-list-item-group component, which allows you to control which list item is selected using the v-model directive. If I use the example from the documentation, then everything works correctly, but if I add a prop to to the v-list-item component (child of the v-list-item-group), then the specified control does not work correctly. Why and is it possible to fix it?

original codepen and mine

Answer 1

When specified to, the list element starts working as a link - inside v-list-itemit will be created router-link, which in your case cannot be created, due to the lack of a router. Well, that's all, it's not interesting to find out what exactly and why it doesn't work.
Decide how you want to control the activity of the list items. If really with the help of a router - well, add it, define routes, remove v-model. If through v-model- no need to try to specify to.