Vue.jsを使ってwebアプリを作ろう#05

前回までToDoリストのチェックボックスの準備をしていき
data要素done: を使ってバインディングしました。

<input type="checkbox" class="form-check-input">
    <span v-bind:class="{'done': done}">{{todo}}</span>

vue.jsでクラスをコントロールできるように
v-bind: をつけてdoneクラスをオブジェクトとして扱います。
{'done':true}
波括弧と'で囲い、
判定するためのtrueのプロパティをいれています。
この【'done': true】 の trueとfalseを
チェックボックスで判定して出し入れしていきます。

次にチェックボックスを入力したら、
打ち消し線が出て、完了した表示になるようにセッティングします。

チェックボックスをバインディングする

main.jsのdata要素 done: のプロパティとチェックボックスをバインディングして判定をしていきます。
Todoリストと同じようにv-modelを使ってバインディングします。

<input type="checkbox" v-model="done" class="form-check-input">
<span v-bind:class="{'done': done}">{{todo}}</span>

v-model="done" をインプットのcheckboxの要素に追加して、
data要素のdoneとつなげてバインディングしました。

複数のリストを追加できるようにする

次に今はリストが一つしかないので、複数追加できるようにしていきましょう。その場合、配列を使ってtodoのリストを追加したり、削除したりできるようにしていきます。

todoの配列 todosを用意していきます。
todos:[]を使ってリスト要素を複数用意してみます。

※main.js

var app = new Vue({
	        el: '#app',
	        data: {
	            // todo: '',
	            // done: true
	            todos: [
	            	{text: 'Vue.jsのバインディングを学習する', done: true},
	            	{text: 'Vue.jsでtodoリストをつくる', done: false}
	            ]
	        }
});

今度は、リストを複数用意しないといけないのですが、
動的にリストを追加していくので、for文を使ってリストを追加していきます。vue.jsで<li>要素をfor文で追加できるディレクティブが用意されています。

v-for="変数 in 配列"　// 変数と配列を当てはめる

の形でリスト要素に追加します。

<li v-for="todo in todos" class="form-check">

次にバインディングされた要素 v-model: のプロパティをtodosの配列の要素とつなげていきます。todosの一つ一つの要素は、todoという変数で設定してある（v-for="todo in todos"）ので下記のようにtodoの中のdata要素を紐付けます。

checkboxのv-model:のdone要素： todo.done
spanのv-bind:のclass要素： {'done': todo.done}
spanの中のtext要素：{{todo.text}}
inputのtext入力要素：v-model="todos[0].text"
※今は、0番目（リストの一番初め）の要素を仮に指定してます。

<ul class="list-unstyled">
				<li v-for="todo in todos" class="form-check">
					<label>
						<input type="checkbox"　v-model="todo.done" class="form-check-input">
						<span v-bind:class="{'done': todo.done}">{{todo.text}}</span>
					</label>
				</li>				
			</ul>
			<p>
				<input type="text" v-model="todos[0].text" class="form-control">
			</p>

※main.js

var app = new Vue({
	el: '#app',
	data: {
		todos: [
			{text: 'Vue.jsのバインディングを学習する', done: true},
			{text: 'Vue.jsでtodoリストをつくる', done: false}
		]
	}
});

まだ入力欄のところが0番目の要素しか入力できない状態なので、
次回から、入力欄に記入したものをリストに追加できるようにしていきます。

今回はここまで。

Twitterではブログに書いていないこともつぶやいているので、ぜひフォローしてください。
https://twitter.com/HAMA3san

ストリートアカデミーで毎月講座を開催中。
https://www.street-academy.com/steachers/198346

webデザイナーもくもく制作サロンへの招待について

https://note.mu/hamasan918/n/ne4d98f9db9ec

もくもく制作サロンを開講しました。
サロンでは勉強会を開催して質問を受け付けています。
月額500円となります。