CODEWITHSUNDEEP
javascripthtmlvue.jsvue-componentvuetify.js
Manan Sharma
Manan Sharma

Reputation: 569

Vue.js: Unable to use a dropdown button inside a App Bar in Vuetify

I have a Vuetify <v-btn> inside a <v-app-bar>.


<template>
    <v-app-bar>
        <v-spacer></v-spacer>

        <v-btn  color="primary">
            Menu
        </v-btn>
    </v-app-bar>
</template>

I am trying to make this particular button a drop down menu. For that I am trying to encapsulate this button inside a <template> with an activator prop.


<template>
    <v-app-bar>
        <v-spacer></v-spacer>

        <template v-slot:activator="{ on, attrs }"> 
            <v-btn  color="primary" v-bind="attrs" v-on="on">
                Menu
            </v-btn>
        </template>
    </v-app-bar>
</template>

But the moment I do this, the button just disappears.

Upvotes: 0

Views: 549

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

To make the button as an activator for a dropdown menu you have to wrap that template by v-menu component then add a list of items :

<template>
    <v-app-bar>
        <v-spacer></v-spacer
<v-menu>
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          color="primary"
          dark
          v-bind="attrs"
          v-on="on"
        >
         Menu
        </v-btn>
      </template>
  <v-list>
        <v-list-item
          v-for="(item, index) in items"
          :key="index"
          @click=""
        >
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
 </v-menu>

    </v-app-bar>
</template>

for more details check this

Upvotes: 1

Related Questions