サイトトップ

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

HTML5テクニカルノート

Vue.js入門 06: 項目を調べてデータから削除する


Vue.jsのデータを書き替えると、新たな内容で表示が改められます。あらかじめ定めた条件にしたがって、データを削除してみます。

01 ボタンを加える

「Vue.js入門 05: 項目を数えて表示する」でつくったコード001に手を加えてゆきましょう。アプリケーションに納めた複数のデータがリストとして示され、入力フィールドのテキストは「追加」ボタンで項目に加えられます。また、項目すべてとチェックのついていない数も、それぞれ示されています(図001)。

図001■全項目数と残りの数が示される

図001

チェック済みの項目は、まとめて除けるようにしましょう。クリックする<button>要素を、つぎのように加えます(図002)。v-on:clickディレクティブから呼び出す関数(archive())はつぎの項で定めます。

<body>要素

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

	<p>
		全{{todos.length}}件中残り{{remaining}}件
		<button  v-on:click="archive()" class="btn btn-danger btn-xs">断捨離</button>
	</p>

</div>

図002■件数の右にボタンが加わった

図002

02 条件にしたがってデータを除く

ボタンから呼び出されるのは、methodsプロパティに加えたつぎのメソッド(archive())です。チェックをつけた項目は、データのプロパティ(done)の値がtrueになります。そこで、データ(todo)の中からチェックのついていない項目を配列に取り出し、もとのデータに上書きしました。

<script>要素

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

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

		archive: function() {
			var remains = [];
			var todos = this.todos;
			var length = todos.length;
			for(var i = 0; i < length; i++) {
				var todo = todos[i];
				if(!todo.done) {
					remains.push(todo);
				}
			}
			this.todos = remains;
		}
	},

});

これで、ボタンを押すとチェック済みの項目はデータから除かれ、画面にはチェックされていない項目だけが残ります(図003)。HTMLとJavaScriptの記述は、以下のコード001にまとめました。併せて、コードを試すためのサンプル001もその下に掲げてあります。

図003■チェック済みの項目が除かれた

図003

コード001■条件にしたがってデータから項目を除く

<body>要素

<div id="app" class="container">
	<h2>Todo</h2>
	<p>
		全{{todos.length}}件中残り{{remaining}}件
		<button  v-on:click="archive()" class="btn btn-danger btn-xs">断捨離</button>
	</p>
	<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 = '';
		},
		archive: function() {
			var remains = [];
			var todos = this.todos;
			var length = todos.length;
			for(var i = 0; i < length; i++) {
				var todo = todos[i];
				if(!todo.done) {
					remains.push(todo);
				}
			}
			this.todos = remains;
		}
	},
	computed: {
		remaining: function() {
			var count = 0;
			var todos = this.todos;
			var length = todos.length;
			for(var i = 0; i < length; i++) {
				if(!todos[i].done) {
					count++;
				}
			}
			return count;
		}
	}
});

サンプル001■条件にしたがってデータから項目を除く

See the Pen Vue.js: Removing Items from Data by Fumio Nonaka (@FumioNonaka) on CodePen.


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


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