Vue.jsで更新メッセージを表示させる。

更新ボタンをタップ後に更新メッセージを表示したかったので実装しました。

表示したいvueファイルに記述する

まずは、更新メッセージを表示したいファイルに以下を記述。私の場合は、以下のディレクトリ構造。MainConatainer.vueファイルは、自分がメッセージを表示したいファイル内に記述してください。

src/resource/js/components/MainContainer.vue

<transition name="fade">
  　<div class="message" v-if="message">
      <p class="alert alert-success">{{ message }}</p>
    </div>
</transition>

<script>内に以下を以下を記述。

data(){
    message: null
}

messageでnullを指定しておく。{{message}}で指定している部分の設定。

methods内の更新アクションエリアに以下を追記

this.message = '更新されました。'
setTimeout(() => {this.message = false;}, 800);

transitionラッパーコンポーネントの使い方を知る

Vue.jsのドキュメントには、以下のように書かれています。

Vue.js のトランジション (Transition) システムを使用すると、DOM から要素を取得したり削除するといったトランジションエフェクトを自動的に適用できます。Vue.js は自動的に、適切な時に、あなたのために CSS トランジションまたはアニメーションをトリガするため、CSS クラスを追加または削除し、そしてトランジションの間は、カスタム DOM の操作をするために、JavaScript フック関数を提供することができます。

つまり、<Transition>で囲った部分のDOMの取得/削除の際のアニメーションエフェクトをコントロールしてくれるようですので、<Transition>を囲っています。

トランジション - vue.js

v-ifの意味を知る

バインドした値がtrueならば、DOMを表示しfalseならば削除する。条件を満たす条件式の場合の表示/非表示の扱いには、v-showという書き方もあるようですが、v-showの場合は、常にDOMに要素が保持されるようです。また、v-showはcssでの表示切り替えになるため、一部のブラウザ(SafariとIE)などでは表示がコントロールできないので、v-ifで対応する必要があるようです。

通常通りに行えれば、エラーは出ないかと思います。以上で完了です。ではでは。