Allied ArchitectsAllied ArchitectsEngineer Blog

第一章9 『axiosを使ってtodo一覧を取得する』

2022/04/11 Vue.js

バックエンドの実装が終わってしまったのでこれからはフロントの実装をしていく。

まずはコンポーネントがマウントされた時にデータベースに登録されているtodoの情報を取って来れるように処理を書いていく。

resources/js/components/TodoList.vueとresources/css/app.cssを少し編集した。

vueファイルの方はヘッダーのclassをlogoに変更したのとヘッダーをdivで囲うようにした。divで囲った理由は後々モーダルを出すために一番初めのdivの中に複数の大きなdivを入れたいから。

↓のようなイメージ。

 

resources/js/components/TodoList.vueを以下のように編集した。

 

CSSはこんな感じでカスタムプロパティを設定して使う色をまとめた。

 

まずはtodoを取ってくる処理から実装する。今回はdata, mounted, watch, methodsを使うのでresources/js/components/TodoList.vueを以下のようにしておく。特に意味はないが、説明する時にdataの中だけ切り出して貼り付けたりできるため先にこうしておいた方がいいと思った。

 

処理を書く前にデータベースにtodoのデータを入れておく。

 

まず、dataを以下のように編集してエラーと取得したtodoを入れられるようにする。

 

errorはオブジェクトで登録し、todosは配列にする。errorは複数登録するのではなくstatusとmessageを持たせるだけなのでオブジェクトにした。todosはaxiosでtodo一覧を取得するエンドポイントにGETリクエストを送ったときにtodosのレコード数が0より大きければ配列の中にオブジェクトが入った形式

でレスポンスが返ってきて0の場合は何も入っていないオブジェクト

が返ってくることになっているが、受け取ったtodosは要素の有無に関わらず配列として扱いたいのでここでは配列にしている。ちなみにこれをすればオブジェクトを配列に変換してくれるわけではない。todosは基本的に配列として扱いますよ的なアナウンス程度の効果だと思う。

 

次に、methodに以下のようにgetTodosという関数を追加する。axiosを使ってapi/todosのエンドポイントにGETリクエストを送信し、返ってきた配列またはオブジェクトの要素数が0だったらdataのtodosに空の配列を入れる。要素数が0じゃない場合はそのデータをtodosに入れる。要素数が0の時にreturnしてないのはその後に共通の処理を書くから。

この時にエラーが起きたらdataのerrorにstatusとmessageを追加する。

 

そしてバックエンドから返ってきたtodosとerrorを確認したいのでテンプレートを以下のように編集する。

 

モーダルとエラー用にCSSを追加した。

 

ここまでできたらコンポーネントがマウントされた時にgetTodosが呼ばれるようにmountedにgetTodosを追加する。

 

これでページにアクセスしてみると以下のように表示されると思う。todoと一緒にlabelの情報も取得できている。これはapp/Models/Todo.phpで protected $with = ['labels']; を追加してあるからである。

 

試しにapp/Http/Controllers/Api/Todo/GetTodosController.phpの以下の部分をコメントアウトしてリロードしてみる。

 

こんな感じに表示された。サーバー側でエラーが起きていてGetTodosControllerでJsonResponseを返さなきゃいけないのに何も返ってきていないというのがわかる。ここまで書いてある通りに進んでいればおそらく二度とこのモーダルを見る事はないが、多分バックエンドでエラーが起きていてるんですがどうしたらいいかわかりません的なことがあるかもしれないから一応実装した。

 

れっちり
  • れっちり
  • 2021年新卒入社。letroの開発・運用業務を担当しています。

RELATION ENTRY

第一章11『子コンポーネントにプロパティを渡してグループ分けしたtodoを表示する』

第一章11『子コンポーネントにプロパティ...

2022/04/22 Vue.js

前回、todoを期限でグループ分けしたのでtodoGroupsの中のtodoにアクセスするためにはtodoGroups.within.today.todos[0]というようにする必要がある。また、todoGroups.within.todayまで到達したあとの処理は期限切れ、今日のもの、明日のもの、...

続きを読む

第一章10 『取得したtodoを期限でグループ分けする』

第一章10 『取得したtodoを期限でグ...

2022/04/18 Vue.js

取得した後に期限ごとにグループ分けをしたいので関数を追加する。 まず、getTodos関数によって取得したtodosはidの昇順になっているので、期限の日付で並び替えを行う。 以下の関数をmethodsに追加する。getTodos関数で取得してきたtodosをdataのtodos(以後this....

続きを読む

れっちりの記事一覧へ

ページTOPへ