Saturday, 3 July 2021

Overlay is not shown with vuetify 3

This is the example, taken from vuetify sample

<template>
  <v-row
    align="center"
    justify="center"
  >
    <v-card
      height="300"
      width="250"
    >
      <v-row justify="center">
        <v-btn
          color="success"
          class="mt-12"
          @click="overlay = !overlay"
        >
          Show Overlay
        </v-btn>

        <v-overlay
          :absolute="absolute"
          :value="overlay"
        >
          <v-btn
            color="success"
            @click="overlay = false"
          >
            Hide Overlay
          </v-btn>
        </v-overlay>
      </v-row>
    </v-card>
  </v-row>
</template>

<script>
  export default {
    data: () => ({
      absolute: true,
      overlay: false,
    }),
  }
</script>

This is the result I get:

enter image description here

The problem is that when I click the button, then nothing happens. As I am just learning vue and vuetify I can't understand what is wrong with this example. Could anyone help me?

Important: vue 3, vuetify 3.0.0-alpha.7.



from Overlay is not shown with vuetify 3

No comments:

Post a Comment