質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.23%

Vuetify の toolbar内の navigation-drawer が開きません

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,347

coffeebar

score 5

前提・実現したいこと

Vue+Vuetify+(Vuex+Vue Router+firestone)でクイズアプリを作ろうとしている初心者です。
上部のメニューバーを作成しているのですが、Vuetify の navigation-drawerが開きません。

発生している問題・エラーメッセージ

補足情報に書いた2つのサンプルプログラムから 要らない部分を削った上で、合成してメニューバーを作成しようとしています。
見た目は思い通りになったのですが、navigation-drawer が開かず メニューが出ません。

該当のソースコード

// Header.vue

<template functional>
  <div>
    <v-navigation-drawer v-model="drawer" absolute temporary>
      <v-list class="pt-0" dense>
        <v-divider></v-divider>
        <v-list-tile v-for="item in items" :key="item.title" :to="item.to">
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>

    <v-toolbar dark color="primary" clipped-left fixed app>
      <v-toolbar-side-icon
        @click.stop="drawer = !drawer"
      ></v-toolbar-side-icon>
      <v-toolbar-title class="headline text-uppercase white--text">
        <span>Vuetify</span>
        <span class="font-weight-light">MATERIAL DESIGN</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>

      <v-toolbar-items>
        <v-btn flat to="/">Home</v-btn>

        <v-menu
        v-if="props.loggedIn"
        auto
        offset-y
        bottom
    >
        <v-avatar slot="activator" class="ml-2 mr-5">
          <img :src="props.profile.picture" />
        </v-avatar>
        <v-list>
          <v-list-tile @click="props.logout">
            <v-list-tile-title>Logout</v-list-tile-title>
          </v-list-tile>
        </v-list>

        </v-menu>
        <v-btn
        class="mr-5"
        v-else
        flat
        @click="props.login"
        >Login</v-btn>
      </v-toolbar-items>
    </v-toolbar>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      drawer: null,
      items: [
        { title: "Home", icon: "dashboard", to: "/" },
        { title: "About", icon: "question_answer", to: "/about" }
      ]
    };
  }
};
</script>


//App.vue

<template>
  <v-app>
    <Header
      :login="login"
      :logout="logout"
      :profile="profile"
      :loggedIn="loggedIn"
    />
    <v-content>
      <v-container>
        <router-view></router-view>
      </v-container>
    </v-content>
    <v-footer app></v-footer>
  </v-app>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex';

  import Header from '@/components/Header';

  export default {
    name: 'app',

    components: { Header },

    computed: {
      ...mapGetters('user', {
        profile: 'profile',
        loggedIn: 'loggedIn'
      })
    },

    methods: {
      ...mapActions('user', {
        login: 'login',
        logout: 'logout'
      })
    }
  };
</script>

試したこと

v-toolbar, v-navigation-drawer のプロパティ変更など試しましたが どうもうまくいきません。

補足情報(FW/ツールのバージョンなど)

1. Vuetify と Vue Router でレスポンシブなナビゲーションを作ってみました
https://qiita.com/yousakamori/items/6b5def3f3c1d1aeff5a4

2. Building a Progressive Quiz App with Vue, Vuex, and Firestore
https://medium.com/@amenallah.hsoumi/building-a-progressive-quiz-app-with-vue-vuex-and-firestore-part-1-ce73c7ba695d

バージョン
Vue 2.6.10
Vuetify 2.0.19

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

今利用されているVuetifyのバージョンは2系ですが、参考にされている記事では1.5系を使われているようです。
2系になって消えたpropsやタグがありますので、最新のドキュメントを見られるのがよいかと思います。
https://vuetifyjs.com/en/components/toolbars

v-navigation-drawerは大丈夫そうですが、
v-toolbarまわりは変更が必要ですね。
clipped-leftのpropsもありませんし、v-toolbar-side-iconのコンポーネントもありません(替わりに v-app-bar-nav-iconを使います)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/02 17:54

    8zca様、お礼が遅れてすみません。
    Vuetify2.0に下位互換性が無いことを知りませんでした。
    v-app-barで作り直そうとしておりますが、どうもバージョン2へのアップデートがうまくいっていない
    ようで、「v-app-bar-nav-iconは登録されてないよ」みたいなエラーが出ました。

    https://qiita.com/filunK/items/e71999d5abef404744b3
    https://qiita.com/hiyoko3/items/edda7901e145711de213
    ↑ このあたりを見て、環境を整えようとしているのですが、まだうまくいきません。
    やっぱり難しいですね><

    キャンセル

  • 2019/10/02 22:37

    こんばんは。
    最初から2系をインストールして開発されたわけではなく、1系からアップグレードされたかんじですかね?

    キャンセル

  • 2019/10/04 22:51

    確か そうだったと思います。色々試しているうちに、ドツボにハマってどんどん悪化させてしまったようです。一から環境を作り直して、やってみます。一旦この質問は閉じて、また改めます。
    ご回答、ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.23%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る