グローバルナビゲーションへ

本文へ

フッターへ

お役立ち情報Blog



JavaScriptフレームワークの「Vue.js」を使ってToDoリストを実装してみよう(後編)

前編(https://www.asobou.co.jp/blog/web/vuejs)では、Vue.jsの導入方法からToDoリストの作成、データの追加機能までを実装しました。
後編では、追加されたデータの削除/更新/完了/復元を実装し、機能を充実させてみたいと思います。

データの削除/更新

【1】データ識別のためにIDを追加する

listのIDとテキストを表示してみます。

追加するデータにIDを追加します。
IDの重複が起こらないよう、ユニークIDを追加します。

実行結果(別サイトが開きます。)

【2】削除メソッドを追加する

表示するリストの中に削除/更新ボタンを追加します。
ここでメソッドに【1】で追加したidを渡してあげます。
※v-onディレクティブは省略して「@」と記述することもできます。

メソッド側で受け取ったidのデータを削除します。
サンプルでは削除ボタン押下後、最終確認アラートを出すようにしてみました。

実行結果(別サイトが開きます。)

【3】更新メソッドを追加する

メソッド側で受け取ったidのデータを更新します。

実行結果(別サイトが開きます。)

データの完了/復元

済、未済識別のために【1】と同様に、listにflagを追加します。
flagの切り替えにより済、未済の切り替えを行います。

【4】ステータス変更メソッドを追加する

削除/更新と同様にidをメソッドに送り、編集します。

flagの切り替えを行います。

実行結果(別サイトが開きます。)

さいごに

二回に分けてToDoリストの実装をしてきました。
感覚的に実装が可能なため、フロントエンドの開発が初めての方でも、とっつきやすいかと思います。

これからVue.jsで開発してみようと思った方は、ぜひ公式ドキュメントを見ながら挑戦してみてください!

The following two tabs change content below.

ばね

ソリューション事業部 システムエンジニア
東京で2年半エンジニアとしての経験を積み、浜松にUターンの後、アーティスへ入社。 ソリューション事業部のWebエンジニアとして、システムの設計・開発・保守・運用からインフラまで幅広く従事している。 フルスタックエンジニア目指して現在も勉強の日々。車が好き。
この記事のカテゴリ

FOLLOW US

最新の情報をお届けします