Добавление v-меню к кнопке приводит к ее исчезновению в Vuetify - PullRequest
Новая
       8

Добавление v-меню к кнопке приводит к ее исчезновению в Vuetify

0 голосов
/ 24 октября 2018

У меня есть степпер.На шаге 3 есть кнопка, к которой я хочу добавить v-menu.когда я добавляю v-меню, кнопка исчезает.Вот мой код: 

<template>


.
.
.
.
<v-stepper-step :complete="e6 > 3" step="3" editable>Subrack Configuration</v-stepper-step>

<v-stepper-content step="3">
  <v-card color="grey lighten-4" class="mb-5" height="660px">
    <app-tabs></app-tabs>
      <v-flex xs12 sm6 offset-sm3>
        <div v-if="show6U">
          <v-spacer></v-spacer>

          <v-container
            fluid
            grid-list-xl
          >
           <v-layout row wrap class="light--text">
            </v-layout>
          </v-container>
          <app-toppic class="topPic"></app-toppic>
            <v-menu
              transition="slide-y-transition"
              bottom
              v-model="hasanGholi"
            >
              <v-btn slot="activator" color="white">​<v-spacer></v-spacer> 1‍ ​<v-spacer></v-spacer><v-divider color="black" vertical></v-divider>​ ​​​‌‌▾​​ ​</v-btn>
              <v-list>
                <v-list-tile
                  v-for="(item, i) in items"
                  :key="i"
                  @click=""
                >
                  <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                </v-list-tile>
              </v-list>
            </v-menu>
        </div>
      </v-flex>
  </v-card>
</v-stepper-content>
.
.
.
.
</template>

<script>
import TOPPic from "../../components/Subrack/TOP/TOPPic";
import Tabs from "../Tabs";
export default {
data() {
  return {
    hasanGholi: true,
    e6: 1,
    items: [
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me 2' }
    ]
  }
},
components: {
  appToppic: TOPPic,
  appTabs: Tabs
},    
}
</script>

<style scoped>
.topPic{
position: relative;
right: 700px;
top: -150px;
}
</style>

обратите внимание, что кнопка <v-btn slot="activator" color="white">​<v-spacer></v-spacer> 1‍ ​<v-spacer></v-spacer><v-divider color="black" vertical></v-divider>​ ​​​‌‌▾​​ ​</v-btn>.

Когда я добавляю v-меню <v-menu transition="slide-y-transition" bottom v-model="hasanGholi">, кнопка исчезает.Когда я удаляю тег v-menu, кнопка возвращается на экран.Я не знаю, почему кнопка исчезает, поэтому мне было интересно, как добавить меню в кнопку, чтобы оно не исчезло?

1 Ответ

0 голосов
/ 31 октября 2018

Я использовал position: absolute; в CSS, тогда как это должно было быть position: relative;, и это решило проблему

...