この記事はUdemyの講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」の学習を進めながら書いた記事になります。Vue.jsに関する記事の一覧はこちらからご覧いただけます。
引き続き、TODOアプリの作成を進めて行きましょう。
inputのvalueを双方向データバインディングする
まずは、inputのvalueと双方向データバインディングするプロパティを作成します。
var app = new Vue({
el: "#app",
data: {
newItem: ''
},
methods: {
addItem: function() {
alert();
}
}
})次はテンプレート側のinputにv-modelディレクティブを設置して、先ほど設定したプロパティnewItemと双方向データバインディングできるように記述します。
<div id="app">
<h2>Todo List</h2>
<form v-on:submit.prevent>
<input type="text" v-model="newItem">
<button v-on:click="addItem">
Add
</button>
</form>
<pre>{{ $data }}</pre>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>デバッグ用に<pre>{{ $data }}</pre>を記述して、データの動きをリアルタイムで確認できるようにしています。動作としては、このようにinputにテキストを入力したら即時反映されていれば問題ありません。
タスクの追加
TODOのタスクを格納する配列を用意して、Addボタンが押されたら配列にタスクを格納していく処理を記述します。
var app = new Vue({
el: "#app",
data: {
newItem: '',
todos: [] // ←ここね
},
methods: {
addItem: function() {
alert();
}
}
})次に、ボタンがクリックされた時に呼ばれるaddItemメソッドで、inputに入力されている値と、データバインディングされているnewItemの値を配列に追加する処理を記述します。
タスク１件が持つデータは、タスクの名前と完了・未完了も後ほど管理する処理を書くため、オブジェクトとして配列に追加していきます。
var app = new Vue({
el: "#app",
data: {
newItem: '',
todos: []
},
methods: {
addItem: function() {
// alert();
var todo = {
item: this.newItem
};
this.todos.push(todo);
}
}
})動作としては、現時点ではこのようになっています。
push()というのがちょっと引っかかったんですが、調べてみると、
this.todos.push(todo)は、配列todosの末尾にtodo（＝item＝newItem）を追加するという処理のようですね。
タスク追加後の文字列を一旦削除する
上に掲載しているアニメーションGIFを見てもらうとわかるように、タスクは配列に追加できているんですが、inputに入力した文字列がAddボタンを押した後も残ってしまっているので、次のタスクを入力する際に人力で一旦消してから入力しなくてはならないという形になってしまっています。
これでは使い勝手が良くないので、タスクを追加した後にinputに残っている文字列を削除する処理を追加します。
this.todos.push(todo);
this.newItem = '';先ほど記述したthis.todos.push(todo);の次にthis.newItem = '';という処理を追加しています。
これは難しいことはされていないのですが、配列に追加処理を行なった後に、inputで双方向データバインディングしているバリュー値newItemに一旦''（空）を入れているだけですね。なるほど、こうしてるんですね。
実際の動作はこのような感じになります。
先ほどと比べると、断然入力しやすくなっているのが見ていただいてわかるかと思います。こういう気配り大事ですね！
タスクが未入力ならデータを配列に入れない
現在の動作として、input入力フォームに何も入力せずにAddボタンを押しても、配列に空のデータが設定されてしまいます。
これはあまりよろしくないので、タスクが入力されていない時にAddボタンを押されても配列に何も入れないという処理を追加していきます。
var app = new Vue({
el: "#app",
data: {
newItem: '',
todos: []
},
methods: {
addItem: function() {
// alert();
if( this.newItem == '' ) return; //←追記した部分
var todo = {
item: this.newItem
};
this.todos.push(todo);
this.newItem = '';
}
}
})if( this.newItem == '' ) return;という処理を追加しました。
これは、「もしnewItemが（==）''（空：未入力）だったらreturn（処理をこの時点で終了）するという意味になります。
これで試してみましょう。
まとめ
今回はTODOアプリをつくる２回目ということで、タスクのデータを配列に入れていくなどの処理を作っていくことができました。
レクチャー動画でわかりやすく解説してもらえるので全然詰まらずに進めることができています。初めて見る言葉とか記述は併せて公式ドキュメントでも確認すると理解が深まって良いですー！
Vue.js以外にも基本的なWebスキルを動画で受講することができます。年に何回かセールがあるので、その時にまとめて購入するのがおすすめです。
