Nuxtアプリでv-showで制御するボタンが一瞬見えてしまう

Question

作ろうとしているもの

今、Nuxtを使って簡単なホームページのようなものを作ろうとしています。
ヘッダー部分にナビゲーションとしてボタンを並べていて、スマホサイズの時はそれらをハンバーガーメニューの中にしまいたいです。

そこで下記のようなコードを書きました。

layouts/default.vue
<template>
  <v-app dark>
    <v-app-bar clipped-right fixed app>
      <template v-for="item in items">
        <v-btn
          v-show="!isMobile"
          :key="item.title"
          tile
          text
          height="100%"
          :to="item.to"
          >{{ item.title }}</v-btn
        >
      </template>
      <v-spacer />
      <v-btn icon @click.stop="rightDrawer = !rightDrawer" v-show="isMobile">
        <v-icon>mdi-menu</v-icon>
      </v-btn>
    </v-app-bar>
    <v-content>
      <v-container>
        <nuxt />
      </v-container>
    </v-content>
    <v-navigation-drawer
      clipped
      v-model="rightDrawer"
      right
      temporary
      fixed
      width="100%"
    >　。。。

データには {title: "Home", to: "/"} などといったオブジェクトの配列が items として用意してあり、 isMobile については computed 内で

computed: {
  isMobile() {
    return this.$vuetify.breakpoint.xs
  }
}

のように書いています。

起こっていること/お聞きしたいこと

上記のコードをスマホから開くと、PC画面の時と同じように一瞬ヘッダー内にボタンが描画されたあと、ハンバーガーメニューが出てきます。（コードでいうと <template v-for=~ > の部分）。
これをスマホから開いたときにラグなしに一発でスマホ用レイアウトが描画されるようにしたいです。

試したこと

isMobileの参照されるタイミングが悪いのかと思って、いろいろbeforeMountでdataに入れたものを監視するようにしてみたり、 v-cloak を使ってみたりしたのですが、解決しませんでした。

根本的なことのミスかもしれませんが、解決方法をご教示いただければさいわいです。
宜しくお願い致します！

Answer 1

CSS frameworkにVuetify.jsを利用されているという前提で回答致します。
下記のようにv-showの代わりにclassを指定する方法をお試しください。

v-show="!isMobile"の代わりにclass="hidden-xs-only"

<v-btn
  :key="item.title"
  tile
  text
  height="100%"
  :to="item.to"
  class="hidden-xs-only"
>
  {{ item.title }}
</v-btn>

v-show="isMobile"の代わりにclass="hidden-sm-and-up"

<v-btn
  icon
  @click.stop="rightDrawer = !rightDrawer"
  class="hidden-sm-and-up"
>
  <v-icon>mdi-menu</v-icon>
</v-btn>

この指定では表示されない要素のcssにdisplay: noneが当たっているだけで、要素自体は存在します。
要素自体描画したくない場合はclassを下記のように変えてみてください。

• hidden-xs-only → d-none d-sm-flex
• hidden-sm-and-up → d-flex d-sm-none

classの意味についてはCSS Display helpers - Vuetify.jsで確認できます。

Comments

[hajifu]

お返事遅くなり申し訳ありません！
教えていただいた方法で解決できました！ありがとうございます！

追加で一つだけお聞きしてもよろしければ…
hiddenで隠す方法と、noneを当てる方法、どちらもできたのですが、
noneの場合、消さない条件のときにflexを当てるのはどうしてなのでしょうか？
ためしにd-xs-only-noneとしてみたらそれでも同じような挙動をしてくれたのですが、flexを当てておかないと何か不具合がでるのでしょうか？？

[hajifu]

すみません。上記についてd-xs-only-noneで消えたと書きましたが、気のせい（キャッシュのせい？）だったようです。
しかしもし制御する対象がflexボックスになることでレイアウトが変わるようなもの（複数のdivとか）だったら困るなあと思ってしまいました…