Allied ArchitectsAllied ArchitectsEngineer Blog

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

2022/04/22 Vue.js

前回、todoを期限でグループ分けしたのでtodoGroupsの中のtodoにアクセスするためにはtodoGroups.within.today.todos[0]というようにする必要がある。また、todoGroups.within.todayまで到達したあとの処理は期限切れ、今日のもの、明日のもの、それ以降のものに限らず同じにしたいのでtodosの中身を表示するためのコンポーネントを作成する。resources/js/components/TodoGroup.vueを作成し、以下のように編集する。

このコンポーネントではtodoの編集と削除を行うのでeditTodoという関数とdeleteTodoという関数をプロパティとして受け取る。また、期限はyyyy-mm-ddの形式で持っているが、表示する時には○月○日というように表示させたいのでそのためのformatDeadlineという関数も受け取る。calenderColorというのは期限切れのtodoに限り、カレンダーのアイコンと文字を赤くしたいのでクラスをプロパティとして渡せるようにした。todoGroupというプロパティにはtodoGroups.behind, todoGroups.within.today, todoGroups.within.tomorrow, todoGroups.within.othersが入る。

 

 

このコンポーネントをresources/js/components/TodoList.vueで使えるようにインポートする。

 

子コンポーネントに渡すための関数を作る。getTodosの下にeditTodoとdeleteTodoを追加する。

 

methodsの一番下にformatDeadline関数を追加した。

 

resources/js/components/TodoList.vueのヘッダーの下にtodoを表示するためのhtmlを書いていく。

 

todoの追加ボタンをクリックしたときにtodoを追加するためのモーダルを表示したいのでdataにshowAddTodoModalという変数を追加する。

 

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

RELATION ENTRY

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

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

2022/04/18 Vue.js

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

続きを読む

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

第一章9 『axiosを使ってtodo一...

2022/04/11 Vue.js

バックエンドの実装が終わってしまったのでこれからはフロントの実装をしていく。 まずはコンポーネントがマウントされた時にデータベースに登録されているtodoの情報を取って来れるように処理を書いていく。 resources/js/components/TodoList.vueとresources/c...

続きを読む

れっちりの記事一覧へ

ページTOPへ