Vuetifyでドロワーの残骸が残ってたので暫定的に解決した

## 挨拶

こんにちは、最近色々企みすぎて何からやろうか迷って結局何もしなくなるんじゃないかと心配な私です。
今回、ウェブページを適当に作ろうと思って書いていたコードが予想以上に沼ったので、私が見つけた間接的な解決方法を書きたいと思います。

仕事でこの実装したら怒られると思いますが、責任は負いません。

## 環境
```
Node(node -v): v16.15.0

Nuxt(nuxt -v): @nuxt/cli v2.15.8
Vuetify(npm info vuetify): v2.6.5
```

## そもそも問題はなんなのよ
Vuetifyにて
> 「`v-navigation-drawer`を使って、ある程度画面が小さくなったら(今回は`sm`(<575px)以下)、`nav-bar`のコンテンツをすべて隠してdrawerに突っ込んだろう」ということをしていたところ、1440pxあたりで`v-navigation-drawer`**の残骸**が復活する」

という謎が起きました。↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2386109/a3a37964-fa6d-426b-f473-f1ffbe574807.png)

ちゃんとドロワーが格納されている例(モバイル)↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2386109/28c7e3e8-6b2e-f948-8b9f-a1a13423b761.png)

ちゃんとドロワーが格納されている例(PC)↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2386109/fc2a1740-436c-bfb9-d1a2-900850b6fd4d.png)

## 使っていたコード

```html:想定していた動きじゃないコード
<template>
  <v-navigation-drawer v-model="drawer" fixed app class="hidden-md-and-up">
      <!-- content -->
  </v-navigation-drawer>
  <v-app-bar fixed app>
      <v-app-bar-nav-icon
        class="hidden-md-and-up"
        @click.stop="drawer = !drawer"
      />
  </v-app-bar>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
    }
  }
}
</script>
```

クラス指定以外のコードは基本的にVuetifyを初期化したときに出てくる初期画面からほぼパクってきたのですが、それが原因なのかなあ…

`hidden-md-and-up`は文字通り、`「widthがmd以上で隠してくれて、md未満だと表示する(隠さない)」`といった動作をしてくれる神みたいなクラスです。
`.d-(hoge)-(ponya)`はちょっとよくわからなかったのでパスしました。[^1]
[^1]:使い方はこう→https://vuetifyjs.com/ja/styles/display/#display

## やってみたこと①

> `v-navigation-drawer`を`div`タグで囲んで、そのdivタグにクラスを指定してみる

コードは以下のようになります。

```html:Fix案 1
<template>
  <div class="hidden-md-and-up">
    <v-navigation-drawer v-model="drawer" fixed app>
        <!-- content -->
    </v-navigation-drawer>
    <v-app-bar fixed app>
      <v-app-bar-nav-icon
        class="hidden-md-and-up"
        @click.stop="drawer = !drawer"
      />
    </v-app-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
    }
  }
}
</script>
```

なお、意味はありませんでした。

## やってみたこと②

Vueのstateを見ていると、勝手に`data`の`drawer`が`true`になっていました。
なんででしょう。
勝手になるなら戻してしまえ、ということで以下のコードを実装しました。
```html:Fix案 2
<script>
export default {
  data() {
    return {
      drawer: false,
    }
  },
  mounted: () => {
    this.drawer = false;
  },
}
```

で、実行結果は

:::note alert
TypeError: Cannot set properties of undefined (setting 'drawer')
:::


dataをpropsにして再度実行してみましたが、なんかもう動かないので諦めました。
原因はわかりません…

## Solve! やってみたこと③
どうしても動かんので、公式ドキュメント↓をもう一度覗いて勉強することにしました。

https://vuetifyjs.com/ja/components/navigation-drawers/#temporary

と、そこでこんな記述を見つけました。
> temporary は、ドロワーをアプリケーション画面の上に重なるように表示し、幕（overlay）を表示して背景を暗くします。 モバイル端末ではデフォルトでこの挙動になります。 ドロワーの外をクリックすることで、ドロワーは閉じます。

```
俺「直接的な解決策じゃないけど、モバイルならデフォルトの動作だし、md以上で隠すならこのプロパティが使えるのでは？！」
```

~~天才的に~~ひらめいた私は以下を実装しました。

```js:Fix code
<template>
  <v-navigation-drawer
      v-model="drawer"
      fixed
      app
      temporary // <- 追加！！
      class="hidden-md-and-up"
    >
      <!-- content -->
  </v-navigation-drawer>
  <v-app-bar fixed app>
      <v-app-bar-nav-icon
        class="hidden-md-and-up"
        @click.stop="drawer = !drawer"
      />
  </v-app-bar>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
    }
  }
}
</script>
```

動きました。
同時にdrawerもfalseでキープされるようになりました。
なんででしょう。~~教えて詳しい人。~~

## できた
今回は間接的に解決しましたが、解決できたらまた書き直します。
ご覧いただきありがとうございました。