How to set deactive other group list if one is active on same time in 2nd level of menu lists?

Question

I am working on the Vue.js template and I need to create a menu up to the 3rd level. If I perform active deactivate functionality using v-model then that is working fine but on the 1nd level, not on 2nd level.

Dom:

<template v-for="item of category">
    <template v-if="item.items!= null">
        <v-list-group :key="item.title" no-action v-model="item.active">
            <template v-slot:activator>
                <i class="mr-2" :class="item.action"></i>
                <span>{{ item.title }}</span>
            </template>
            <div>
                <template v-for="child in item.items">
                    <template v-if="child.subitems !== null">
                        <v-list-group sub-group no-action :key="child.id" prepend-icon="m"
                            v-model="child.subactive">
                            <template v-slot:activator>
                                <v-list-item-title v-text="child.title">
                                    <i class="mr-2" :class="child.action"></i>
                                </v-list-item-title>
                            </template>
                            <template v-for="(subchild) in child.subitems">
                                <v-list-item :key="subchild.id"
                                    :to="subchild.path">
                                    <v-list-item-title v-text="subchild.title"></v-list-item-title>
                                </v-list-item>
                            </template>
                        </v-list-group>
                    </template>
                </tempalte>
            </div>
        </v-list-group>
    </template>
</template>

Data:

export const category = [
            {
               action: 'icon-name',
               title: 'Level 1',
               active: false,
               items: [
                  { 
                     title: 'Level 2',
                     subactive: true,
                     path:null,
                     subitems:[
                        { title: 'Level 3', path: '/default/level3'},
                        { title: 'Level 3.1', path: '/dashboard/level3.1'}
                     ]
                  },
                  { 
                     title: 'Level 2.1',
                     subactive: false,
                     path:null,
                     subitems:[
                        { title: 'Level 3', path: '/dashboard/level3'},
                        { title: 'Level 3.1', path: '/dashboard/level3.1'},
                     ]
                  },
               ]
            }
         ]
      }

According to the documentation of vuetify for the 1st level I use v-model="item.active" and I tried same thing with 2nd level v-model="child.subactive" but it is not working for the 2nd level how can I do this??

Answer 1

This issue is due to v-slot:activator in the nested level, few of the components like tooltip, dialog, supports predefined objects to pass to activators and bind to events

Here is the perfect explanation

Find the Vuetify implementation

Tried the same approach to utilize the vuetify behaviour, but nothing worked as expected

Finally ended up with adding some manual code and control the active and deactive of the list groups

Here is the working codepen: https://codepen.io/chansv/pen/OJJbNjm?editors=1010

Full code:

<div id="app">
  <v-app id="inspire">
    <v-card class="mx-auto" max-width="500">
      <template v-for="item of category">
        <template v-if="item.items!= null">
          <v-list-group :key="item.title" no-action v-model="item.active">
            <template v-slot:activator>
                <i class="mr-2" :class="item.action"></i>
                <span>{{ item.title }}</span>
            </template>
            <template v-for="(child, index) in item.items">
              <template v-if="child.subitems !== null">
                <v-list-group sub-group no-action :key="child.id" v-model="child.subactive" @click="closeOther(index, item.items)">
                  <template v-slot:activator>
                    <v-list-item>
                      <v-list-item-content>
                        <v-list-item-title>
                          {{ child.title }}
                        </v-list-item-title>
                      </v-list-item-content>
                    </v-list-item>  
                  </template>
                  <v-list-item v-for="(subchild) in child.subitems" :key="subchild.id" @click="navigateTo(subchild.path)">
                    <v-list-item-action v-if="subchild.icon">
                      <v-icon>{{ subchild.icon }}</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                      <v-list-item-title>
                        {{ subchild.title }}
                      </v-list-item-title>
                    </v-list-item-content>
                  </v-list-item>
                </v-list-group>
              </template>
            </template>
          </v-list-group>
        </template>
      </template>
    </v-card>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    category: [
            {
               action: 'icon-name',
               title: 'Level 1',
               active: false,
               items: [
                  { 
                     title: 'Level 2',
                     subactive: true,
                     path:null,
                     subitems:[
                        { title: 'Level 3', path: '/default/level3', icon: 'call_made'},
                        { title: 'Level 3.1', path: '/dashboard/level3.1', icon: 'call_made'}
                     ]
                  },
                  { 
                     title: 'Level 2.1',
                     subactive: false,
                     path:null,
                     subitems:[
                        { title: 'Level 3', path: '/dashboard/level3', icon: 'call_made'},
                        { title: 'Level 3.1', path: '/dashboard/level3.1', icon: 'call_made'},
                     ]
                  },
               ]
            },
         ],
    model: 1,
  }),
  methods: {
    navigateTo(path) {
      console.log(path);
      // this.$router.push({path: path});
    },
    closeOther(val, items) {
      items.forEach((x, i) => {
        if(val != i) x.subactive = false
      })
    },
  }
})