Vuetify 2 v-navigation-drawer 在 dialog = false 之后不再显示

Question

我正在使用导航抽屉在对话框中显示我的数据列表。当我第一次打开它时它工作并显示正常，但是当我再次打开对话框时，整个导航抽屉消失了。 我的数据GET也没有问题。

 <v-navigation-drawer floating height="140px" class="w-100">
            <v-list dense rounded>
              <v-divider></v-divider>
              <v-list-item-group class="mt-3" color="primary" mandatory>
                <v-list-item v-for="(desc, index) in dataList" :key="index" @click="getDesc(desc)">
                  <v-list-item-action-text class="pe-4">{{ desc.title }}</v-list-item-action-text>
                  <v-list-item-content>

                  </v-list-item-content>
                  <v-list-item-icon>
                    <v-icon small color="red" class="pe-2" @click="deleteDesc(desc.eid)">mdi-delete</v-icon>
                  </v-list-item-icon>
                </v-list-item>
                <v-list-item v-if="!dataList.length">
                  مرحله ای وجود ندارد
                </v-list-item>
              </v-list-item-group>
            </v-list>
          </v-navigation-drawer>

它在一个表单中。 我的数据在对话框组件中获取功能：

async getData() {
  await this.$store.dispatch("axiosGet",
      {url: 'folder/api/descriptions', params: {Title: this.title}}).then(response => {
    if (response.status === 'error') return
    this.dataList = response.data.data.data
  })
},

Answer 1

您需要将v-model传递给v-navigation-drawer才能显示和隐藏它。 这是您需要的最低要求示例 go。

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

 <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@6.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> <v-navigation-drawer v-model="drawer" floating height="140px" class="w-100"> <v-list dense rounded> <v-divider></v-divider> <v-list-item-group class="mt-3" color="primary" mandatory> <v-list-item> <v-list-item-action-text class="pe-4">idk</v-list-item-action-text> </v-list-item> </v-list-item-group> </v-list> </v-navigation-drawer> <v-btn absolute @click="drawer =:drawer">Toggle</v-btn> </v-app> </div> <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>