[Nuxt.js] ボタンをv-ifで表示切り替えをすると一瞬表示されるのを回避したい

Question

Nuxt.jsでFirestoreに保存されている日付(lastDate)とアクセス時の日付(nowDate)が同じならボタンを非表示にするというプログラムを書いています。

下記のコードで試したところ、ページにアクセスするとFirestoreからデータを受け取るまでの数秒間、ボタンが表示されてしまうので最初は非表示の状態にして、日付が同じでなければ表示するというプログラムを組みたいです。

どなたかお詳しい方、お知恵をお貸し頂けますと助かります。

<template>
  <div v-if="nowDate !== lastDate">
    <a class="button">
    </a>
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  computed: {
    nowDate() {
      return dayjs().format('YYYY-MM-DD')
    },
    lastDate() {
      return this.$store.state.date.lastDate.lastDate
    }
  }
</script>

Answer 1

Firestoreからのデータ取得が終わるまでlastDateの値が設定されずundefinedになるようでしたら、v-if="lastDate && nowDate !== lastDate"のようにしたら良いのではないでしょうか?

Comments

[nztm]

回答ありがとうございます。
そうしてみたところ、意図した動作にすることができました。

Answer 2

一番スマートなのはストアに値をセットし終わってからページの表示を行う方法だと思います。
fetchによる方法を記載しておきますがmiddlewareでも問題ありません。

<template>
  <div v-if="nowDate !== lastDate">
    <a class="button">
    </a>
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  async fetch({ store }) {
    await store.dispatch('date/*****') // ストアの日付更新処理
  },
  computed: {
    nowDate() {
      return dayjs().format('YYYY-MM-DD')
    },
    lastDate() {
      return this.$store.state.date.lastDate.lastDate
    }
  }
</script>

Comments

[nztm]

ボタンを押したらその日の日付がFirestoreに保存され、もしアクセスしたときがそれと同じ日ならボタンを表示をしないようにしたいのですが、頂いたコードで試してみたところ、やはり最初の一瞬だけ表示されてしまってボタンが押せてしまいます..。ストアの日付更新処理にはFirestoreからデータを取得するstoreのactionのgetDateを入れました。

[nt4c]

そのstoerアクションでpromiseを返すようにはなっていますか？そうでなければasync/awaitは意味を成さないので調整したほうが良いかと思います。
promiseを返すようになっていて同じ問題が繰り返される場合はrelatさんの回答にあるように、lastDateが有効な値でない場合でも表示しないという処理でも良いかと思います。

[nztm]

ご返信ありがとうございます。
relatさんの回答の内容で試してみたところ、意図した動作になったので、
とりあえずはこの実装でいきたいと思います。