Question

0

311

Views

v-menu close before v-list-item onclick is seen

I have the following menu setup with vue and vuetify:

<div id="app">
  <v-app id="inspire">
    <div class="text-center">
      <v-menu>
        <template v-slot:activator="{ on }">
          <v-btn
            v-on="on"
          >
            Click me
          </v-btn>
        </template>
  
        <v-list>
          <v-list-item v-if="!t"
                       @click="t=!t">
            <v-list-item-title>Option 1</v-list-item-title>
          </v-list-item>
  
          <v-list-item v-if="t"
                       @click="t=!t">
            <v-list-item-title>Option 2</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </div>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    t: false
  },
})

After clicking the menu open, and clicking "Option 1", I intend for the menu to close, and the subsequent menu open to show "Option 2". This happens, but the transition from "Option 1" to "Option 2" is seen during the menu close (gif example below). The intention is to not see the transition occur while the menu is closing. (No transition in the list until menu exits)

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-08-31T07:35:33.177Z

You can wrap the list items in a transition-group:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({ t: false })
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app id="inspire">
    <div class="text-center">
      <v-menu>
        <template v-slot:activator="{ on }">
          <v-btn v-on="on">Click me</v-btn>
        </template>
        <transition-group tag="v-list" name="fade">
          <v-list-item v-if="!t" @click="t=!t" key="1">
            <v-list-item-title>Option 1</v-list-item-title>
          </v-list-item>
          <v-list-item v-else @click="t=!t" key="2">
            <v-list-item-title>Option 2</v-list-item-title>
          </v-list-item>
        </transition-group> 
      </v-menu>
    </div>
  </v-app>
</div>

0

311

v-menu close before v-list-item onclick is seen

1 answers

0

Find remote jobs

Andres GPT