Creating a nested mennu on vuetify

user_8280054 0
Viewed 21

I am trying to create a nested menu for my vuetify projeect based on this example. My code looks like this:

<template>
<v-container>
    <v-app>
        <v-app-bar app>
            <v-toolbar-title>Schnitzeljagd</v-toolbar-title>
            <!-- OLD CODE -->
            <v-menu :close-on-content-click="false" open-on-hover bottom offset-y>
                <template v-slot:activator="{ on }">
                    <v-btn icon v-on="on">
                        <v-icon>mdi-dots-vertical</v-icon>
                    </v-btn>
                </template>

                <v-list>
                    <v-list-item>
                        <v-list>
                            <select v-model="locale">
                                <option v-for="lang in locales" :key="lang.code" :value="lang.code">{{
                                        lang.name
                                }}
                                </option>
                            </select>
                        </v-list>
                    </v-list-item>

                    <v-list-group v-model="active" no-action>
                        <template v-slot:activator>
                            <v-list-tile>
                                <v-list-tile-content>
                                    <v-list-tile-title>Language</v-list-tile-title>
                                </v-list-tile-content>
                            </v-list-tile>
                        </template>
                        <select>
                            <option v-for="lang in locales" :key="lang.code">
                                   {{ lang.name }}
                            </option>
                        </select>
            <!-- NEW CODE -->


                    </v-list-group>
                </v-list>
            </v-menu>
            <v-menu left bottom>


                <v-list>
                    <v-list-item>
                        <LanguageSwitcher />
                    </v-list-item>
                    <v-list-item>
                        <v-list color="deep-purple accent-4" dense dark>
                            <select v-model="locale">
                                <option v-for="lang in locales" :key="lang.code" :value="lang.code">{{
                                        lang.name
                                }}
                                </option>
                            </select>
                        </v-list>
                    </v-list-item>
                </v-list>
            </v-menu>
        </v-app-bar>

    </v-app>
</v-container>

<script>

export default {

    data: () => ({
      locales: [
            { name: 'English' },
            { title: 'Italian' },
          ]
    }),
    components: {}
}
</script>

As you can see I have commented two blocks of code, once as "old code" and once as "new code". Since the menu I get from the old code does not look good I want to adjust it and get a new version (new code) which is looking like the example linked previously.

But somehow I cannot get the items in the list to be clickable.

nuxt.js vuetify.js javascript
1 Answers

There are a few issues in your code:

  1. You are setting v-model to the locale variable, but you do not have it defined in data.
  2. The locales array of objects is not uniform and the objects are missing the code property.

Fixes:

  1. data should have the locale defined:
data: () => ({
  locale: null
})
  1. The locales array should be uniform and w/out missing data:
locales: [
  {
    name: 'English', // or title, pick one
    code: 'en' // I'm assuming ISO here
  },
  {
    name: 'Italian',
    code: 'it'
  }
]

As for the layout, this is a menu using vuetify 2:

<v-menu left bottom>
  <template v-slot:activator="{ on }">
    <v-btn icon v-on="on">
      <v-icon>mdi-dots-vertical</v-icon>
    </v-btn>
  </template>

  <v-list>
    <v-list-item-group v-model="locale">
      <v-list-item v-for="lang in locales" :key="lang.code" :value="lang.code">
        {{ lang.name }}
      </v-list-item>
    </v-list-item-group>
  <v-list>
</v-menu>

If you want for "something" to happen when user selects the language name, you can watch for changes on the locale.

More v-list examples.

user_67764670
Related