如何在访问页面时从头开始显示v-overlay元素

Question

我目前正在使用 Nuxt v3.9.3 和 vuetify 3.5.1 构建应用程序。

我有一个基于下面的“ablosute”链接的实现，它在按下按钮时显示覆盖。 https://v2.vuetifyjs.com/ja/components/overlays/#absolute

<template>
...
<div id="app">
  <v-app id="inspire">
    <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>
  </v-app>
</div>
...
</template>

<script setup>
import { ref } from 'vue'

const overlay = ref(false)
</script>
<script>


export default {
  el: '#app',
  data: () => ({
    overlay: true,
    absolute: true
  })
}
</script>

我不知道如何保留它并在访问页面时自动出现相同的覆盖层。 有人可以告诉我该怎么做吗？

我以为一开始就将

overlay 

标志设置为true就可以满足条件，所以就改了，但是并没有达到预期的效果。

来自

const overlay = ref(false)

到

const overlay = ref(true)

Answer 1

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    overlay: true,
    zIndex: 0,
  }),
})

<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.10/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/vuetify.min.css" rel="stylesheet"/>
<div id="app">
  <v-app id="inspire">
    <v-row justify="center">
      <v-btn
        class="white--text"
        color="teal"
        @click="overlay = !overlay"
      >
        Show Overlay
      </v-btn>
  
      <v-overlay
        :z-index="zIndex"
        :value="overlay"
      >
        <v-btn
          class="white--text"
          color="teal"
          @click="overlay = false"
        >
          Hide Overlay
        </v-btn>
      </v-overlay>
    </v-row>
  </v-app>
</div>