时间戳

首页 > 解决方案 > 我页面上的导航抽屉未按预期工作（Vuetify）

vue.js - 我页面上的导航抽屉未按预期工作（Vuetify）

问题描述

我的 vuejs 应用程序的导航栏中有一个 vuetify 导航抽屉。它可以正确打开和关闭。问题是里面没有一个项目是可点击的。正确的功能是 navdrawer 内的项目应充当指向其他页面的链接。目前，只连接了注销按钮，但即使这样也不起作用。

我的代码：

 <template>
  <v-app-bar flat app>
    <!--Logo-->
    <v-toolbar-title class="text-uppercase">
      <v-img src="@/assets/jawnfinder-logo.png" class="logo" contain max-height="75px" center></v-img>
    </v-toolbar-title>
    <!--Signup button and process-->
    <div v-if="!user"><Signin /></div>
    <!--Logout button-->
    <v-btn text target="_blank" color="yellow darken-2" v-if="user">
      <span class="logout btn" @click="logout">Logout</span>
    </v-btn>
    <!--Account button, maybe this should be it's own component. It's kinda long-->
    <v-app-bar-nav-icon class="blue--text" @click="account = !account" v-if="user">Account</v-app-bar-nav-icon>
    <v-navigation-drawer v-model="account" class="yellow" right temporary app>
      <v-list-item>
        <v-list-item-avatar>
          <v-img src="https://randomuser.me/api/portraits/men/78.jpg"></v-img>
        </v-list-item-avatar>
        <v-list-item-content>
          <v-list-item-title>Account</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <v-divider></v-divider>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title>Profile</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title>Toolboxes</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title>Settings</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title @click="logout">Logout</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-navigation-drawer>
  </v-app-bar>
</template>

下面的导航抽屉应该是亮黄色的！不是灰黄色。有什么建议么？ 在此处输入图像描述

标签： vue.jsvuetify.js

解决方案

您的代码看起来不错，需要在导航抽屉组件中添加修复

从导航抽屉组件中删除临时属性

<v-navigation-drawer v-model="account" class="yellow" right **temporary** app>

用。。。来代替

<v-navigation-drawer v-model="account" class="yellow" right app>

推荐阅读