ビジネスとIT活用に役立つブログ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.
アーティス

アーティス

創造性を最大限に発揮するとともに、インターネットに代表されるITを活用し、みんなの生活が便利で、豊かで、楽しいものになるようなサービスやコンテンツを考え、創り出し提供しています。
この記事のカテゴリ:

SNSで最新の情報を
受け取ることができます!