FrontEnd

Vue.js入門その3〜簡単にTODOアプリを作ってみたよ〜

投稿日:2017年7月10日 更新日:

はじめに

7/12 修正
記事下部にて、 filter メソッドを使用している箇所がありましたが、 forEach の方が適しているとご指摘がありましたので、修正しました。

以前Qiitaの方に投稿した記事ですが、こちらにも投稿します。
少しご指摘もいただいたので、FIX版になります!
Vue.jsの勉強で超簡単なタスク管理アプリを作ってみる

今まで、Vue.jsの記事として下記を投稿してきました。

ただ、今ひとつピンとこなかったため、よくあるTODOアプリを作成してみました。

サンプルはこちらです。
https://jsfiddle.net/naoki85/fo26rmr0/12/

準備

Bootstrapを読み込み

CSSは面倒なので、Bootstrapを使用したいと思います。
JS Fiddleでは、External Resourcesにて読み込むことができます。
CDNのURLを取得し、JS Fiddleの左側、External Resourcesに入力しておきます。

このとき、BootstrapのJSはJQueryを必要とするのでCSSのみにしておきます。
(後でコンソールでエラーが出てしまうので。。。)

HTMLで目的のかたちを作る

このような感じです。

タスクの一覧表示

Vueインスタンスの作成

後述しますが、TODOの完了は論理削除としますので、プロパティに isDeleted をもたせておきます。

v-forとv-ifを使用して条件ループ

まずはテーブルタグの方に id="tasks-index" を割り当てておきます。

また、 v-fortasks の値をループ処理します。
そして、 v-if で、 isDeleted = true の値だけ出力するようにします。

これで、一覧表示はできましたので、次は新規登録です!

タスクの新規登録

クリックイベントの設定

「Create Task」ボタンが押されたら、 tasks プロパティに値を追加したいので、クリックイベントを設定します。
v-on:click を使用すれば、設定したインスタンスメソッドにとばすことができます。

今回は後ほど、 createTask というメソッドを作りたいと思います。

また、入力フォームとして input タグを使用していますが、そこに v-modelnewTask というプロパティをバインディングしています。
新規登録に際し、新しい値をどこかに保持する必要があると考えたのですが、とりあえず新しいインスタンスプロパティを用意し、そこに保持する方法としました。
(このあたりはもっとスマートな方法がありそうです。。。)

インスタンスに追記

タスクの完了(論理削除)

前述したように、タスクの完了とは、論理削除とさせていただきます。

クリックイベントの設定

doneTask メソッドをVueインスタンスに追記したいと思います。

メソッドの追記

doneTask メソッドは、引数として task_id を受け取ります。
その後、 tasks プロパティをfilterで処理し、対象のIDの isDeleted をtrueにして完了(論理削除)とします。

filterではなくforEachを使用

7/12 追記

filter メソッドはブロック内を満たす新しい配列を生成するため、今回のように論理削除する場合には forEach の方が適しているというご指摘をいただきました。
そのため、 doneTask メソッドは下記のように修正しました。

さいごに

簡単ではありますが、勉強用に作成してみました。

まだ公式リファレンスが残っているので、もう少し基本をやり、近いうちにSPAを作って公開したいと思います!

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

Vue.js入門その6〜RouterとComponentを使ってTODOアプリを修正〜

1 はじめに2 vue-routerのインストール3 サーバーサイドの改修3.1 APIに詳細(show)を追加3.2 元となるビューファイルを作成3.3 ルーティングの修正4 Vue.jsの実装4. ...

svelte

SvelteのStore入門

1 はじめに2 SvelteにおけるStoreの概要2.1 Storeの条件2.2 Storeの種類3 Storeの実装と使い方3.1 Writable Store3.1.1 実装例3.1.2 使用例 ...

js

Vue.jsをTypeScriptで安全に開発するためのtsconfig.json

1 はじめに1.1 開発環境1.2 プロジェクト作成時点のtsconfig.json2 include3 exclude4 compilerOptions4.1 コンパイル系オプション4.1.1 ta ...

[Next.js] netlifyからCloudflare Pagesに引っ越してみた

1 はじめに2 netlify vs Cloudflare Pages3 Cloudflare Pagesへのデプロイ4 netlifyでのリダイレクト設定とビルド停止5 さいごに6 おすすめ書籍 は ...

フロントエンドで動画デコレーション&レンダリング

1 はじめに2 レンダリング方法の検討3 背景部分のキャプチャ3.1 modern-screenshotの導入3.2 DOMのキャプチャ4 ffmpeg.wasmで画像と動画を合成4.1 ffmpeg ...

フォロー

blog-page_side_responsive

2017年7月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。