メニュー内リンクを押すとメニューを閉じる？

ピンとこないかもしれませんが、ハンバーガーメニューからページ内リンクで移動するケースを考えてみてください。

ページ遷移が発生しないので、それ用の処理を入れておかないとメニューが閉じないんです。

Nuxt.jsでサイトを作るとSPA(Single Page Application)になるようで、別ページへ移動した場合にも同様の現象が発生しました。 なのでこれは必須の処理です。

メニュー外を押してもリンクを閉じる？

ハンバーガーメニューの幅を80％とかにすると、左右どちらかに余白ができます。

この余白部分をクリックした時にもメニューを閉じさせるように、ということです。

これは必須じゃないと思いますが、僕はけっこうこういう操作をするので実装したいと思います。

v-onの書き方の注意点

「v-on」のダブルクオーテーション内は「生のテキスト」ではなく「コード記述部分」です。

どういうことかというと、

v-on:click="title = トップページ"

のような書き方ではエラーが出るんです。

v-on:click="title = 'トップページ'"

文字列を使う場合はシングルクオーテーションで囲まなければいけないようです。

見た目が変にHTMLなせいで最初これで躓いてしまいました。

このルールは「v-on」に限らず、「v-for」「v-if」などでも同様です。

開くボタンと閉じるボタンを兼用する場合

開くボタンをクリックすると「×」マークに変わって、今度は閉じるボタンになる、みたいなタイプです。

その場合はtrueやfalse固定で代入してはまずいので、この↓ように。

<button id="menu-open" v-on:click="flag = !flag">(略)</button>

現在値を反転させて代入します。 開いていればfalse、閉じていればtrue。

クリックした際に閉じる機能の追加

閉じる機能自体は先ほどと同じなので、先ほどの「v-on」を追加します。

<div id="menu-bg" :class="{open:flag}" v-on:click="flag = false">(略)</div>

リンクをクリックでメニューを閉じる機能

メニュー本体の中身はだいたい次のようなコードだと思います。

<ul>
<li><nuxt-link to="(略)">(略)</nuxt-link></li>
<li><nuxt-link to="(略)">(略)</nuxt-link></li>
<li><nuxt-link to="(略)">(略)</nuxt-link></li>
</ul>

<nuxt-link>はNuxt.jsでの<a>タグです。 SPAで先読みに使うんだとか。 「href」じゃなくて「to」になる点に注意。

ここに先ほどと同様に「クリックすると変数flagをfalse」にするコードを追加します。

<nuxt-link to="(略)" v-on:click="flag = false">

どういうわけかこれだとメニューが閉じません。 この↓ように<a>タグにするとメニューが閉じます。

<a href="(略)" v-on:click="flag = false">

<a>タグはよくて<nuxt-link>でダメということは、コンポーネントではv-onが使えないのかなとVue.jsのマニュアルを調べていると、「コンポーネントでv-onする時はnative修飾子つけなあかんよ」と。

<nuxt-link to="(略)" v-on:click.native="flag = false">

これで期待通りの動作となりました。

まずはメニューの項目を定義

メニュー展開フラグの「flag」と合わせて、dataメソッドでメニュー項目を定義します。

export default {
  data() {
    return {
      flag: false,
      menus: [
        { public: true, href: '/', title: 'ホーム' },
        { public: true, href: '/blog/', title: 'ブログ' },
        { public: false, href: '/test/', title: 'テストページ' },
      ],
    }
  },
}

各メニューの情報は次の3要素にしました。

• 「public」＝公開済みかどうかのフラグ
• 「href」＝ページのURL
• 「title」＝ページの名前

「public」はなくてもいいかと思いますが、開発時だけ下書きページへアクセスできるようにしたりと、まぁぶっちゃけ「v-if」の練習のためです。

メニューをv-forで処理

「v-for」は名前の通りループ処理です。

v-forを使って先ほど定義したメニュー配列をループ処理します。

書き方はこう↓。

<ul>
<li v-for="menu in menus">
<nuxt-link></nuxt-link>
</li>
</ul>

<ul>ではなくて、繰り返し出力される<li>の方にv-forをつけます。

後ろの「menus」がdataで宣言した配列名です。

前の「menu」はループ中で使う現在の要素の変数名です。 こちらは自由に命名することができます。

v-forループ内の書き方

これで<li>の中ではメニューオブジェクトに「menu」という変数でアクセスできるようになります。 メニューオブジェクトには「public」「href」「title」の3要素を持たせてあるので、<nuxt-link>の部分はこう↓書きます。

<nuxt-link :to="menu.href">{{menu.title}}</nuxt-link>

「to」の前にセミコロンが付いていますが、これはテキストじゃなくて変数を展開しないといけないので「v-bind」にしているからです。 変数を参照する場合は属性名にセミコロンを付ける。

「title」の方には中括弧が二重についています。 これはタグの内側？生のテキストを書くところ？で変数を書く場合にはこのように書きます。

この中括弧での変数展開ですが、HTMLタグを含めることができません。

例えば、「title」に「<span class="red">新着情報！</span>」みたいな値を入れておくと、HTMLタグがエスケープされてタグごと出力されてしまいます。 HTMLタグをHTMLタグとして出力したい場合には「v-html」というのを使います。

<nuxt-link :to="menu.href" v-html="menu.title"></nuxt-link>

これで<nuxt-link>の内側にHTMLタグが機能したままmenu.titleを展開できます。

v-ifによるループの除外

メニューオブジェクトに公開/非公開の「public」というフラグを持たせたので、フラグがfalseの時はメニューを非表示にしてみます。

これには「v-if」を使います。

<nuxt-link>にv-ifをつけると外側に空の<li>が残ってしまうので、v-ifは<li>の方につけます。

<li v-for="menu in menus" v-if="menu.public == true">

ちょっと丁寧に書きましたが、これ↓でもおｋです。

<li v-for="menu in menus" v-if="menu.public">

これで「public」が真に設定されたメニューだけ表示されます。

1点注意として、Vue.jsのマニュアルを見ていると、「v-forとv-ifは同時に使ったらダメ」とあります。

どういうケースで併用したらダメなのかピンときませんでしたが、今回のような併用はおｋと書いてあるので問題なし。