【Vue3入門】実践を通じて学ぶTODO List #3

前回の記事ではVue3を使ってTODOリストを作成する方法を紹介しました。今回はその続きとして、実際にTODOリストに追加や削除の機能を実装していきます。

TODOリストに追加機能を実装する

まずは、TODOリストにタスクを追加するためのフォームを追加します。

“`html

追加

“`

上記のコードでは、フォームが提出された際に`addTask`メソッドを呼び出すように設定しています。また、`v-model`を使って入力された値を`newTask`というデータと紐づけています。

次に、`addTask`メソッドを定義します。

“`html
methods: {
addTask() {
if (this.newTask.trim() === ”) return;
this.tasks.push({ title: this.newTask, completed: false });
this.newTask = ”;
}
}
“`

上記のコードでは、新しいタスクを`tasks`という配列に追加し、フォームの入力欄をクリアする処理を行っています。

TODOリストからタスクを削除する

次に、TODOリストからタスクを削除する機能を実装していきます。

“`html

• {{ task.title }}
  削除

“`

上記のコードでは、`v-for`を使って`tasks`配列のタスク一覧を表示し、それぞれのタスクに削除ボタンを設置しています。

次に、`deleteTask`メソッドを定義します。

“`html
methods: {
deleteTask(index) {
this.tasks.splice(index, 1);
}
}
“`

上記のコードでは、選択されたタスクを`tasks`から削除する処理を行っています。

これでTODOリストにタスクの追加と削除の機能が実装できました。次回は、TODOリストに完了状態を付ける機能を実装していきます。