Vue.js + ES6入門 12: ローカルコンポーネントを定める

const filters = {
	all(todos) {
		return todos;
	},
	active(todos) {
		return todos.filter((todo) =>
			!todo.done
		);
	},
	completed(todos) {
		return todos.filter((todo) =>
			todo.done
		);
	}
};
const listHeader = Vue.extend({
	props: {
		todos: {
			type: Array,
			required: true
		},
		remaining: {
			type: Number,
			required: true
		}
	},
	methods: {
		archive() {
			this.$emit('archive');
		}
	},
	template: `
		<p>
			全{{todos.length}}件中残り{{remaining}}件
			<button class="btn btn-danger btn-sm"  @click="archive">断捨離</button>
		</p>
	`
});
const todoItem = Vue.extend({
	props: {
		todo: {
			type: Object,
			required: true,
			validator(value) {
				return (
					value.hasOwnProperty('text') &&
					value.hasOwnProperty('done') &&
					value.hasOwnProperty('id')
				);
			}
		}
	},
	methods: {
		removeTodo(todo) {
  			this.$emit('remove-todo', todo);
		}
	},
	template: `
		<div>
			<label>
				<input type="checkbox" v-model="todo.done">
				<span :class="{'done': todo.done}">{{todo.text}}</span>
			</label>
			<button class="btn btn-warning btn-sm" @click="removeTodo(todo)">削除</button>
		</div>
	`
});
const todoList = Vue.extend({
	components: {
		'todo-item': todoItem
	},
	props: {
		filteredTodos: {
			type: Array,
			required: true
		}
	},
	methods: {
		removeTodo(todo) {
			this.$emit('remove-todo', todo);
		}
	},
	template: `
		<ul class="list-unstyled">
			<li v-for="todo in filteredTodos" :key="todo.id">
				<todo-item :todo="todo" @remove-todo="removeTodo">
				</todo-item>
			</li>
		</ul>
	`
});
const addTodo = Vue.extend({
	data() {
		return {
			todoText: ''
		};
	},
	methods: {
		addTodo() {
			const newTodo = this.todoText.trim();
			this.todoText = '';
			if (!newTodo) {return;}
			this.$emit('add-todo', newTodo);
		}
	},
	template: `
		<p>
			<input type="text" v-model="todoText" placeholder="add new todo here">
			<button class="btn btn-primary btn-sm" @click="addTodo">追加</button>
		</p>
	`
});
const listFooter = Vue.extend({
	props: {
		visibility: {
			type: String,
			required: true,
			validator(value) {
				return (
					['all', 'active', 'completed'].includes(value)
				);
			}
		},
		filters: {
			type: Object,
			required: true,
			validator(value) {
				return (
					value.hasOwnProperty('all') &&
					value.hasOwnProperty('active') &&
					value.hasOwnProperty('completed')
				);
			}
		}
	},
	methods: {
		changeFilter(key) {
			this.$emit('change-filter', key);
		}
	},
	template: `
	<div>
		<button type="button"
			v-for="(value, key) in filters"
			:key="key"
			:class="['btn btn-outline-info btn-sm mr-1', {active: visibility === key}]"
			@click="changeFilter(key)">
			{{ key[0].toUpperCase() + key.substr(1) }}
		</button>
	</div>
	`
});
const app = new Vue({
	components: {
		'list-header': listHeader,
		'todo-list': todoList,
		'add-todo': addTodo,
		'list-footer': listFooter
	},
	data: {
		todos: [
			{text: 'Vue.jsを学ぶ', done: true},
			{text: 'Vue.jsでアプリケーションをつくる', done: false},
		]
		.map((todo, index) => ({...todo, id: index})),
		visibility: 'all',
		filters: filters
	},
	computed: {
		remaining() {
			const count =
				this.todos.reduce((count, todo) =>
					count = (todo.done) ? count : ++count
				, 0);
			return count;
		},
		filteredTodos() {
			return filters[this.visibility](this.todos);
		},
		nextId() {
			if (!this.todos.length) {return 0;}
			const ids = this.todos.map((todo) => todo.id);
			return Math.max(...ids) + 1;
		}
	},
	methods: {
		addTodo(newTodo) {
			this.todos = [
				...this.todos,
				{text: newTodo, done: false, id: this.nextId}
			];
			console.log(this.todos);
		},
		removeTodo(todo) {
			this.todos = this.todos.filter((_todo) => _todo !== todo);
		},
		archive() {
			this.todos = this.todos.filter((todo) => !todo.done);
		},
		changeFilter(visibility) {
			this.visibility = visibility;
		}
	}
});
document.addEventListener('DOMContentLoaded', () =>
	app.$mount('#app')
);