~JavaScript]Nuxt.js(Vue.js)を使って動的モーダルコンポーネントを実装JavaScriptTwitterFacebookはてブPocketLINE2018.10.23今回、動的にモーダル表示するコンポーネントを作りました。「モーダルの状態管理」「親とコンポーネント間のデータの受け渡し」「動的にモーダルの中身を変更する」といった処理が必要で勉強になったので、備忘録代わりに記事にしました。vuexで状態管理を行う実装に変えるとスムーズだと思いました。動的にリスト表示している中にある、@click=”openModal(item)”でopenModalイベントと一緒にitemを引数として渡している。madalコンポーネントへのオブジェクトの受け渡し:valでコンポーネント側にpostItemを渡す。動的に値を所得するpropsで:val=”postItem”から送られてきた値を取得。Objectデータのみを受け取るように定義。動的に値を表示するvalオブジェクトを表示する。親のイベントを発火(モーダルを閉じる)@click=”$emit(‘close’)”で親にある、@close=”closeModal”を発火させる。v2(nuxt-edge)プロジェクトで始めるNuxtをv2(nuxt-edge)を使ってみたら、ビルドの処理速度が明らかに早くなっていました。今回は、Nuxt2でのプロジェクトの始め方について紹介します。Firestoreにデータをインポートする方法がわかったので備忘録として記事にしました。Firebaseでデータベース(firestore)を扱うこの記事は、Nuxt+firebase環境が用意されている前提の記事です。方は以下の記事で、Nuxt+firebase環境を用意してください。以下のファイルを作成する。今まで、webサイト開発のモバイル動作確認をChomeのディベロッパーツールで行っていました。Firestoreを利用したユーザー認証のあるチャットアプリを実装する(1/2)最近、firebaseのデータベースサービスであるfirestoreを利用してサービスを作っています。簡単なfirestoreの操作がわかってきたので、アプリをサンプルにメモします。