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


関連記事

react-icon

React Big Calendarの複数タイムゾーン対応

1 はじめに2 端末のタイムゾーンのみに対応する場合3 複数のタイムゾーンに対応する。3.1 日時を指定のタイムゾーンに変換する3.2 イベントの開始日時・終了日時を動的に設定する3.3 ラップクラス ...

React Router v7のSSRでパスルーティングな i18n をやってみた

1 はじめに2 remix-i18nextの導入2.1 インストール2.2 セットアップ2.3 entry.server.tsxの実装2.4 entry.client.tsxの実装3 i18n対応3. ...

Vue.jsのコードをTypeScriptで書く

1 はじめに2 TypeScriptでの書き方2.1 定義2.2 data2.3 methods2.4 computed2.5 props2.6 emit2.7 lifecycle hooks2.8 ...

react-icon

MUI Themeでカラー、シャドウ、フォントなどを設定する

1 はじめに2 Themeとは3 Themeのセットアップ4 Themeの設定方法4.1 Palette4.1.1 colorオブジェクト4.1.2 直接色を指定する4.2 Elevationのシャド ...

[Rails + Materialize] DateTimePickerがなかったので…

1 はじめに2 前提条件2.1 ビューのイメージ3 モデルにゲッターとセッターを追加4 入力フォームに追加4.1 JSファイルにて使用宣言4.2 HTML4.3 コントローラーのストロングパラメータを ...

フォロー

blog-page_side_responsive

2017年7月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

アプリ情報

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