Chapter 06

ハンバーガーメニューのメニューを変更しよう!

sosa
sosa
2022.09.28に更新
このチャプターの目次

v-on:click(短縮系@click)

クリックされた時の動作は@click="処理内容またはメソッド名"で書きます。ハンバーガーメニューをクリックすると@click="drawer = true"が実行されます。クリックされたらdrawer=trueということです。ではdrawerの値はどのように変わっているか見てみます。
変数を表示するには{{}}で囲めばいいので<v-sheet height="150"></v-sheet>を以下のように変更して、すべてのシートの中にdrawerの値を表示してみます。

実験が終わったら戻してください
<v-sheet height="150">{{drawer}}</v-sheet>

最初は何も表示しない(drawer=null未定義)ですがハンバーガーメニューをクリックするとtrueになりメニューの外の黒いところをクリックするとfalseになります。

v-model

v-navigation-drawerがクリックしたときに開く動作をするタグになります。v-navigation-drawerのPropsを見てみると。
valueの欄にコンポーネントを表示するか非表示にするかを制御しますと書いてあります。つまりvalueをtrue/falseで切り替えれば表示/非表示がコントロールされます。そのvalue Propと変数drawerを紐づけているのが<v-navigation-drawerのv-model="drawer"です。
<v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>はクリックしたときのdrawer=trueになるだけでfalseにする部分がありません。メニューが開いているとハンバーガーメニューが隠れてしまいます。なのでクリックできずtrueにするコードしかありません。falseにしている部分はコンポーネントの中のコードになっているので動作から判断するしかありません。

v-modelに関しては今回のような使い方を理解するのは少し難しいです。取りあえずはinputタグや後で出てくるv-text-fieldで入力したデータを即座に表示する使い方だけ知っていれば結構使えます。

v-list-itemを見るとhref prop
があるので以下のようにすれば外部リンクを紐づけられます。またtarget propもあるのでtarget="_blank"で別タブで開くようになります。リンク先を私のブログに変えてみます。もう1個はVuetifyに変えてます。

         <v-list-item href="https://kikuichige.com" target="_blank">
             <v-list-item-icon>
                 <v-icon>mdi-home</v-icon>
                </v-list-item-icon>
                <v-list-item-title>イチゲブログ</v-list-item-title>
         </v-list-item>