HTML5テクニカルノート

Vue.js入門 07: データを項目ごとに削除する

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

Vue.jsで画面に示したリストから、選択された項目を消します。項目に添えたボタンクリックで項目のデータを取り出し、データの納められた配列からデータを除けば、新たな内容で表示が改められます。

[注記] 本稿はVue.js 2.6とECMAScript 2015(ES6)にもとづく「Vue.js + ES6入門 06: 項目を調べてデータから削除する」に改訂しました。

01 ボタンを加える

「Vue.js入門 06: 項目を調べてデータから削除する」でつくったコード001に手を加えてゆきましょう。アプリケーションに納めた複数のデータがリストとして示され、項目はあとから加えられるだけでなく、チェックのついたものがまとめて除けます(図001)。

図001■チェックのついた項目はまとめて除ける

さらに、チェックのあるなしにかかわらず、項目ごとに消せるようにします。そのために、それぞれの項目に<button>要素を、つぎのように加えます(図002)。v-on:clickディレクティブから呼び出す関数(removeTodo())はつぎの項で定めます。引数には、項目のデータ(todo)を渡しました。

<body>要素


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

	<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>
			<button v-on:click="removeTodo(todo)" class="btn btn-warning btn-xs">削除</button>
		</li>
	</ul>

</div>

図002■それぞれの項目の右にボタンが加わった

02 クリックした項目をデータから除く

ボタンから呼び出されるのは、methodsプロパティに加えたつぎのメソッド(removeTodo())です。クリックした項目のデータは、引数(todo)で受け取ります。データの配列(todos)から、インデックスを調べて(Array.indexOf()メソッド)取り除きました(Array.splice()メソッド)^[*1]。

<script>要素


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

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

		removeTodo: function(todo) {
			var todos = this.todos;
			var index = todos.indexOf(todo);
			todos.splice(index, 1);
		},

	},

});

これで、項目右のボタンを押すとチェック済みかどうかにかかわらず、データから除かれて画面から消えます(図003)。HTMLとJavaScriptの記述は、以下のコード001にまとめました。コードを試すためのサンプル001もその下に掲げてあります。併せて、同じコードをjsdo.itにも上げました。

図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>
			<button v-on:click="removeTodo(todo)" class="btn btn-warning btn-xs">削除</button>
		</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 = '';
		},
		removeTodo: function(todo) {
			var todos = this.todos;
			var index = todos.indexOf(todo);
			todos.splice(index, 1);
		},
		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 a Selected Item from Data by Fumio Nonaka (@FumioNonaka) on CodePen.

Vue.js: Todo List with Adding or Removing Items

[*1] Vue.js 2.0より前のバージョンでは、削除する要素を引数としたArray.$remove()メソッドが用いられることもありました。2.0からこのメソッドはなくなっています。

03 Advanced: Vueの省略記法とECMAScript 6の構文を使う

「Vue.js入門 06: 項目を調べてデータから削除する」のコード001は、その項03「Advanced: Vueの省略記法とECMAScript 6の構文を使う」でコード002に改めました。前掲コード001も本稿で加えた処理を、同じようにVue.jsの省略記法とECMAScript 6の構文で書き替えます。ディレクティブv-onの省略記法はつぎのとおり@です。

<body>要素


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

	<ul class="list-unstyled">
		<li v-for="todo in todos">

			<!--<button v-on:click="removeTodo(todo)" class="btn btn-warning btn-xs">削除</button>-->
			<button @click="removeTodo(todo)" class="btn btn-warning btn-xs">削除</button>
		</li>
	</ul>

</div>

methodsに定めるメソッドは、つぎのように「: function」を省きます。メソッド本体は、変数宣言をvarからconstに改めれば、そのままでも構いません。けれどここでも、Array.filter()メソッドを用いると、配列に残る要素の条件が明らかになり、すっきりとした記述になります。引数はECMAScript 6のアロー関数式=>で渡します。

<script>要素


const app = new Vue({

	methods: {

		// removeTodo: function(todo) {
		removeTodo(todo) {
			/* var todos = this.todos;
			var index = todos.indexOf(todo);
			todos.splice(index, 1); */
			this.todos = this.todos.filter((_todo) => _todo !== todo);
		},

	},

});

前掲コード001をVueの省略記法とECMAScript 6の構文に改めたのが、つぎのコード002です。動きが確かめられるように、以下のサンプル002をjsdo.itに掲げました。

コード002■Vueの省略記法とECMAScript 6の構文でクリックした項目をデータから除く

<body>要素


<div id="app" class="container">
	<h2>Todo</h2>
	<p>
		全{{todos.length}}件中残り{{remaining}}件
		<button  @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 :class="{'done': todo.done}">{{todo.text}}</span>
			</label>
			<button @click="removeTodo(todo)" class="btn btn-warning btn-xs">削除</button>
		</li>
	</ul>
	<p>
		<input type="text" v-model="todoText" placeholder="add new todo here" />
		<button @click="addTodo()" class="btn btn-primary btn-sm">追加</button>
	</p>
</div>

<script>要素


const app = new Vue({
	el: '#app',
	data: {
		todoText: '',
		todos: [
			{text: 'Vue.jsを学ぶ', done: true},
			{text: 'Vue.jsでアプリケーションをつくる', done: false},
		]
	},
	methods: {
		addTodo() {
			const newTodo = this.todoText.trim();
			if (!newTodo) {return;}
			this.todos.push(
				{text: newTodo, done: false}
			);
			this.todoText = '';
		},
		removeTodo(todo) {
			this.todos = this.todos.filter((_todo) => _todo !== todo);
		},
		archive() {
			this.todos = this.todos.filter((todo) => !todo.done);
		}
	},
	computed: {
		remaining() {
			return this.todos.filter((todo) => !todo.done).length;
		}
	}
});

サンプル002■Vue.js + ES6: Removing a clicked item from data

作成者: 野中文雄
更新日: 2017年12月1日 03「Advanced: Vueの省略記法とECMAScript 6の構文を使う」を追加。
作成日: 2016年2月22日