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


関連記事

js

JavaScriptのみでPOSTした場合のCSRFトークンの認証に関するTIPS

1 はじめに2 実装2.1 なぜエラーが発生したか2.2 修正後のコード3 さいごに はじめに RailsアプリケーションでPOSTリクエストを送る場合、多くの場合はform_withなどのヘルパーを ...

Vuexの機能と使い方

1 はじめに2 Vuexとは2.1 Single Source of Truth2.2 状態の取得、更新のカプセル化2.3 単方向データフロー3 Vuexのストア3.1 ステート3.2 ゲッター3.3 ...

ウチのMaterialize事情

1 はじめに2 ボタン3 フォーム3.1 ラベルについて3.2 セレクトボックスについて3.3 ラジオボタンについて4 アラート5 フォント6 さいごに はじめに うちのチームでは現在、CSSフレーム ...

react-icon

【初級者向け】Reactの開発環境の構築

1 はじめに2 Reactとは2.1 Declarative2.2 Component-Based2.3 Learn Once, Write Anyway2.4 Reactのメリット、デメリット3 環 ...

js

TypeScriptでJavaScriptのライブラリを使用するには?

1 はじめに2 対応方法2.1 npmで@typesからインストールする2.2 自分で型定義ファイルを作る3 Declaration Space3.1 Type Declaration Space3. ...

フォロー

follow us in feedly

blog-page_side_responsive

東京改造計画(NewsPicks Book)
2017年7月
 1
2345678
9101112131415
16171819202122
23242526272829
3031 

アプリ情報

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