HTML5テクニカルノート

Vue.js入門 03: データから動的にリストをつくる

ID: FN1702006
Technique: HTML5 / JavaScript
Library: Vue.js 2.1.10

Vue.jsは、複数のデータが納められた配列から値を取り出して、HTMLドキュメントに動的にリストとして加えることができます。かたちの決まった複数のデータが、簡単に扱えるのです。

[注記] 本稿はVue.js 2.6とECMAScript 2015(ES6)にもとづく「Vue.js + ES6入門 03: データから動的にリストをつくる」に改訂しました。

01 項目のデータを複数にする

「Vue.js入門 02: 要素のclass属性を動的に変える」でつくったコード002に手を加えてゆきましょう。今は、入力フィールドに書いたテキストがひとつの項目としてページに示され、チェックボックスでスタイルが変わります(図001)。

図001■入力フィールドのテキストがページの項目に示される

項目のデータを複数にします。Vue()コンストラクタに渡す引数オブジェクトのプロパティdataに、つぎのように新たな配列のプロパティ(todos)を定めて、複数のデータを納めます。

<script>要素


var app = new Vue({

	data: {
		// todo: '',
		// done: false
		todos: [
			{text: 'Vue.jsを学ぶ', done: true},
			{text: 'Vue.jsでアプリケーションをつくる', done: false},
		]
	}
});

配列からデータを取り出して要素として差し込むのがv-forディレクティブです。つぎのように"変数 in データ配列"という構文で、配列から変数にデータをひとつずつ取り出します。子ノードの要素が、ページに差し込むテンプレートになります。

<body>要素


<div id="app" class="container">

	<ul class="list-unstyled">
		<!--<li>
			<label>
				<input type="checkbox" v-model="done" />
				<span v-bind:class="{'done': done}" >{{todo}}</span>
			</label>
		</li>-->
		<li v-for="todo in todos">
			<label>
				<input type="checkbox" v-model="todo.done" />
				<span v-bind:class="{'done': todo.done}">{{todo.text}}</span>
			</label>
		</li>
	</ul>

</div>

02 テキスト入力フィールドのバインディングを改める

テキスト入力フィールドの<input>要素(type属性"text")にバインドしていたプロパティ(todo)はなくなってしまいました。v-modelディレクティブに与えるプロパティをつぎのように書き替えましょう。配列(todos)の初めのデータと入力フィールドのテキストがバインドされます。

<body>要素


<div id="app" class="container">

	<p>
		<!--<input type="text" v-model="todo" placeholder="add a todo here" />-->
		<input type="text" v-model="todos[0].text" placeholder="add new todo here" />
	</p>
</div>

これで複数のデータからそれぞれの項目の要素がつくられて、ページにリストされます(図002)。<body>要素の記述は、以下のコード002にまとめました。併せて、コードを試すためのサンプル001もその下に掲げてあります。

図002■複数のデータからつくられた項目がリストで示される

コード001■複数のデータから要素をつくってリストとして差し込む

<body>要素


<div id="app" class="container">
	<h2>Todo</h2>
	<ul class="list-unstyled">
		<li v-for="todo in todos">
			<label>
				<input type="checkbox" v-model="todo.done" />
				<span v-bind:class="{'done': todo.done}">{{todo.text}}</span>
			</label>
		</li>
	</ul>
	<p>
		<input type="text" v-model="todos[0].text" placeholder="add new todo here" />
	</p>
</div>
<script>
var app = new Vue({
	el: '#app',
	data: {
		todos: [
			{text: 'Vue.jsを学ぶ', done: true},
			{text: 'Vue.jsでアプリケーションをつくる', done: false},
		]
	}
});
</script>

サンプル001■複数のデータから要素をつくってリストとして差し込む

See the Pen Vue.js: Listing Multiple Data by Fumio Nonaka (@FumioNonaka) on CodePen.

作成者: 野中文雄
作成日: 2016年2月17日