[Vuejs]-Vuetify v-list with reactive source collapses upon adding or removing items

by

0👍

I tested [https://vuetifyjs.com/en/components/lists/#sub-group][1] in Vue 2 and for me, the menu didn’t close when a new item was added.

  1. I pushed a new item into data.admin
  2. I assigned a totally new array to data.admin

In both cases, the menu remained open.

I think the question is, are you updating a component state or props.
Because updating component props would probably cause it to rerender and therefore close the menu.

Here is the code that worked for me:

<template>
    <v-app>
        <v-main>
            <v-card class="mx-auto" width="300">
                <v-list>
                    <v-list-group :value="true" prepend-icon="mdi-account-circle">
                        <template v-slot:activator>
                            <v-list-item-title>Users</v-list-item-title>
                        </template>

                        <v-list-group :value="true" no-action sub-group>
                            <template v-slot:activator>
                                <v-list-item-content>
                                    <v-list-item-title>Admin</v-list-item-title>
                                </v-list-item-content>
                            </template>

                            <v-list-item v-for="([title, icon], i) in admins" :key="i" link>
                                <v-list-item-title v-text="title"></v-list-item-title>

                                <v-list-item-icon>
                                    <v-icon v-text="icon"></v-icon>
                                </v-list-item-icon>
                            </v-list-item>
                        </v-list-group>

                        <v-list-group no-action sub-group>
                            <template v-slot:activator>
                                <v-list-item-content>
                                    <v-list-item-title>Actions</v-list-item-title>
                                </v-list-item-content>
                            </template>

                            <v-list-item v-for="([title, icon], i) in cruds" :key="i" link>
                                <v-list-item-title v-text="title"></v-list-item-title>

                                <v-list-item-icon>
                                    <v-icon v-text="icon"></v-icon>
                                </v-list-item-icon>
                            </v-list-item>
                        </v-list-group>
                    </v-list-group>
                </v-list>
            </v-card>

            <v-btn @click="addElement">Add element</v-btn>
        </v-main>
    </v-app>
</template>

<script>
export default {
    name: 'App',

    data: () => ({
        admins: [
            ['Management', 'mdi-account-multiple-outline'],
            ['Settings', 'mdi-cog-outline'],
        ],
        cruds: [
            ['Create', 'mdi-plus-outline'],
            ['Read', 'mdi-file-outline'],
            ['Update', 'mdi-update'],
            ['Delete', 'mdi-delete'],
        ],
    }),
    methods: {
        addElement() {
            this.admins.push(['New', 'mdi-account-multiple-outline']);

            // Completely change the menu
            /* this.admins = [
                ['New', 'mdi-account-multiple-outline'],
                ['Management', 'mdi-account-multiple-outline'],
                ['Settings', 'mdi-cog-outline'],
            ]; */
        },
    },
};
</script>

Leave a comment