見出し画像

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>を囲っています。

v-ifの意味を知る

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

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



この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

嬉しいです!記事を書いててよかったです。
顧問型UIデザイナ/ 個人開発者 独学でweb制作会社に入り2年で退職→独立→年間で改善案件200以上行う→6年目。スタートアップ やサービス関連に携わりながら、週4日で働き、空いた時間にWEBサービスの開発を行っています。主に、サービスやプロダクト開発技術関連の記事を書きます。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。