サイトトップ

Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

Vue.js入門 04: フィールドに入力したテキストを動的に項目として加える


Vue.jsは、入力とアプリケーションの状態を結びつける双方向バインディングが簡単にできます。リストをつくる項目のデータに追加すれば、ページのリストも書き替わるのです。

01 入力フィールドに追加ボタンを加える

「Vue.js入門 03: データから動的にリストをつくる」でつくったコード001に手を加えてゆきましょう。アプリケーションに納めた複数のデータがリストとして示され、入力フィールドのテキストは初めの項目とバインドされています(図001)。これを、入力フィールドから項目が加えられるように書き替えます。

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

図001

入力フィールドの右に、つぎのように「追加」の<button>要素を加えます(図002)。ディレクティブv-on:clickは、クリックしたとき実行するJavaScriptコードの定めです。あとで、詳しくご説明します。入力フィールドの<input>要素(type属性"text")のv-modelディレクティブには新たなプロパティ(todoText)を与え、以下のようにVue()コンストラクタに渡す引数オブジェクトのdataプロパティに加えました。

<body>要素

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

	<p>
		<!--<input type="text" v-model="todos[0].text" placeholder="add new todo here" />-->
		<input type="text" v-model="todoText" placeholder="add new todo here" />
		<button v-on:click="addTodo()" class="btn btn-primary btn-sm">追加</button>
	</p>
</div>

<script>要素

var app = new Vue({
	el: '#app',
	data: {
		todoText: '',
		todos: [

		]
	}

});

図002■入力フィールドの右に「追加」ボタンが加わった

図002

02 入力フィールドの項目をデータに加える

「追加」ボタンをクリックしたら、入力フィールドのテキストを項目としてデータ配列に加えましょう。v-onディレクティブはコロン(:)のあとに引数として添えたイベントに、リスナーが定められます。クリックのイベントはclickです。つぎのようにメソッド(addTodo())を呼び出すことにします。

<body>要素

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

	<p>
		<input type="text" v-model="todoText" placeholder="add new todo here" />
		<button v-on:click="addTodo()" class="btn btn-primary btn-sm">追加</button>
	</p>
</div>

メソッド(addTodo())は、Vue()コンストラクタに渡す引数オブジェクトに、methodsプロパティでつぎのように定めます。入力フィールドのテキストにバインドされたプロパティ(todoText)の値を、データ配列(todos)に項目として加え、テキストは空にしました。

<script>要素

var app = new Vue({
	el: '#app',
	data: {
		todoText: '',
		todos: [

		]
	},
	methods: {
		addTodo: function() {
			var newTodo = this.todoText;

			this.todos.push(
				{text: newTodo, done: false}
			);
			this.todoText = '';
		}
	}
});

これで「追加」ボタンを押すと入力フィールドのテキストがデータに項目として加わり、ページのリストは改められます(図003)。<body>要素の記述は、以下のコード002にまとめました。併せて、コードを試すためのサンプル001もその下に掲げてあります。なお、つぎのようにString.trim()メソッドを用いて、空白だけの入力は防ぐようにしました。

<script>要素

var app = new Vue({

	methods: {
		addTodo: function() {
			var newTodo = this.todoText.trim();
			if (!newTodo) {return;}

		}
	}
});

図003■「追加」ボタンで入力フィールドの項目が加わる

図003

コード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="todoText" placeholder="add new todo here" />
		<button v-on:click="addTodo()" class="btn btn-primary btn-sm">追加</button>
	</p>
</div>
<script>
var app = new Vue({
	el: '#app',
	data: {
		todoText: '',
		todos: [
			{text: 'Vue.jsを学ぶ', done: true},
			{text: 'Vue.jsでアプリケーションをつくる', done: false},
		]
	},
	methods: {
		addTodo: function() {
			var newTodo = this.todoText.trim();
			if (!newTodo) {return;}
			this.todos.push(
				{text: newTodo, done: false}
			);
			this.todoText = '';
		}
	}
});
</script>

サンプル001■入力フィールドのテキストを「追加」ボタンでページの項目に加える

See the Pen Vue.js: Adding Data to the List by Fumio Nonaka (@FumioNonaka) on CodePen.


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


Copyright © 2001-2017 Fumio Nonaka.  All rights reserved.