こんにちは。櫻井です。
今回は前回の「Vueのデータの受け渡しについての備忘録」の実践編といった感じで簡単なTodoリストに挑戦していきたいと思います。
基本的な機能
今回作成するTodoリストの機能は
- タスクの追加 – dataのタスクが入っている配列にタスクの雛形を追加
- タスクの編集 – タスクの配列を編集
- タスクの削除 – 配列から削除
- タスクの完了 – タスクの完了を知らせる真偽値の変更
の4つの機能を持たせます。 完成形がこちら
タスクの追加
作成した手順に沿って説明していきます。
まずはApp.vueの中にタスクを保管しておくための配列を用意します。
今回はdataの中にtaskItemsという名前で用意しました。
次にtaskItemsにタスクを追加するためのボタンを作成します。
AddTaskBtnというコンポーネントを作成してApp.vueに読み込ませます。
このコンポーネントはボタンがクリックされたらApp.vue内のaddTaskというメソッドを発火させるためのコンポーネントになります。
addTaskはtaskItemsに新しいタスクを追加するためのメソッドです。
idのnextTaskIdは呼び出される度に数が追加されるようになっています。
textにはデフォルトでは「タスクを入力してください。」と入っています。
completedはタスクの完了を知らせるボタンを押すと真偽値が反転するようになっています。
タスクの編集
そもそもまだタスクを表示させるコンポーネントがないのでここでTask.vueというコンポーネントを作成してApp.vueに読み込ませます。
このコンポーネントはタスクの編集、削除、完了を操作します。
App.vueでv-forを使いtaskItems内のオブジェクトの数分だけTask.vueの内容を表示させます。
では、タスクの編集の説明をしていきます。
Task.vue側
Task.vue側ではinput時に入力した内容にタスクのオブジェクトのテキストを書き換えてからApp.vueのeditTaskを発火させます。
この時引数に書き換えたオブジェクを渡します。
v-modelではなくinputを使っているのはv-modelだと削除した時などにdataの内容を表示される内容にずれが起きるからです。
App.vue側
App.vue側ではfilterを使って引数のオブジェクトとtaskItems内の一致するオブジェクトを探し出してオブジェクトのtextを書き換えます。
タスクの削除
Task.vue側
タスクを削除するときはボタンが押されたらApp.vueのremoveTaskを発火させます。
このとき引数に削除するオブジェクトを渡します。
App.vue側
App.vue側は受け取ったオブジェクトを使ってtaskItemsから一致するオブジェクトだけを除外します。
タスクの完了
タスクの完了はチェックボックスを使ってtrueの時がタスクの完了、falseの時が未完了にしています。
今回は完了したタスクのopacityが変わるようにしています。
Task.vue側
チェックボックスの真偽値でオブジェクトのcompletedを書き換えてからApp.vueのcompletedTaskを発火させます。
この時引数に書き換えたオブジェクを渡します。
App.vue側
App.vue側ではfilterを使って引数のオブジェクトとtaskItems内の一致するオブジェクトを探し出してオブジェクトのcompletedを書き換えます。
まとめ
簡易的なアプリですがはじめに作る順番をちゃんと考えないで無計画に作り始めたら訳が分からなくなって結局情報整理して一から作ることになりました。設計図って大切なんだな。