yiidtw/todo.html

## todo.html
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .done {
            text-decoration: line-through
        }
    </style>
</head>
<body>
    <div id="app">
        <todo-input :todos="todos"></todo-input>
        <todo-item v-for="(todo, index) in todos" :index="index" :todo="todo" :todos="todos" :key="index"></todo-item>
    </div>
    <script type="text/javascript">
        Vue.component('todo-item', {
            props: ['todo', 'index', 'todos'],
            template:
                `<li>
                        <input type="checkbox" v-if= "!todo.isEdit" @change="toggleDone(todo)" :checked="todo.isDone" />
                        <label v-if="!todo.isEdit" :class="{ done: todo.isDone }">{{ todo.title }}</label>
                        <input v-if="todo.isEdit" type="text" v-model="editedTodoTitle" v-on:keyup.enter="editTodo(index, todos)" />
                        <button v-if="!todo.isEdit" @click="toggleEditTodo(index, todos)">edit</button>
                        <button @click="delTodo(index, todos)">delete</button>
                </li>`,
            methods: {
                toggleDone: function(todo){
                    todo.isDone = !todo.isDone;
                },
                delTodo: function(index, todos){
                    if (index > -1){
                        todos.splice(index, 1);
                    }
                },
                editTodo: function(index, todos){
                    if (this.editedTodoTitle && this.editedTodoTitle.replace(/\s/g, '').length > 0){
                        todos[index].title = this.editedTodoTitle;
                    }else{
                        this.editedTodoTitle = '';
                    }
                    todos[index].isEdit = false;
                },
                toggleEditTodo: function(index, todos){
                    todos[index].isEdit = true;
                    this.editedTodoTitle = todos[index].title;
                },
            },
            data: function () {
                return {
                    editedTodoTitle: '',
                }
            },
        });
        Vue.component('todo-input', {
            props: ['todos'],
            template:
                `<div>
                    <input type="text" placeholder="new todo" v-model="newTodoTitle" v-on:keyup.enter="addTodo(todos)" />
                    <button v-on:click="addTodo(todos)" >add</button>
                    <button v-on:click="clearAllTodos(todos)" :disabled="todos.length < 1">clear all</button>
                </div>`,
            data: function () {
                return {
                    newTodoTitle: '',
                }
            },
            methods: {
                addTodo: function(todos){
                    if (this.newTodoTitle && this.newTodoTitle.replace(/\s/g, '').length > 0){
                        todos.push({ title: this.newTodoTitle, isDone: false, isEdit: false});
                        this.newTodoTitle = '';
                    }
                },
                clearAllTodos: function(todos){
                    while(todos.length > 0){
                        todos.pop();
                    }
                    localStorage.removeItem('vue-demo-app-todo-list');
                },
            },
        });
        var app = new Vue({
            el: '#app',
            data: {
                todos:[],
            },
            watch: {
                todos: function(){
                    localStorage.setItem('vue-demo-app-todo-list', JSON.stringify(this.todos));
                }
            },
            mounted: function(){
                this.todos = localStorage.getItem('vue-demo-app-todo-list') ? JSON.parse(localStorage.getItem('vue-demo-app-todo-list')) : [];
            },
        })
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style>
	.done {
	text-decoration: line-through
	}
	</style>
	</head>
	<body>
	<div id="app">
	<todo-input :todos="todos"></todo-input>
	<todo-item v-for="(todo, index) in todos" :index="index" :todo="todo" :todos="todos" :key="index"></todo-item>
	</div>
	<script type="text/javascript">
	Vue.component('todo-item', {
	props: ['todo', 'index', 'todos'],
	template:
	`<li>
	<input type="checkbox" v-if= "!todo.isEdit" @change="toggleDone(todo)" :checked="todo.isDone" />
	<label v-if="!todo.isEdit" :class="{ done: todo.isDone }">{{ todo.title }}</label>
	<input v-if="todo.isEdit" type="text" v-model="editedTodoTitle" v-on:keyup.enter="editTodo(index, todos)" />
	<button v-if="!todo.isEdit" @click="toggleEditTodo(index, todos)">edit</button>
	<button @click="delTodo(index, todos)">delete</button>
	</li>`,
	methods: {
	toggleDone: function(todo){
	todo.isDone = !todo.isDone;
	},
	delTodo: function(index, todos){
	if (index > -1){
	todos.splice(index, 1);
	}
	},
	editTodo: function(index, todos){
	if (this.editedTodoTitle && this.editedTodoTitle.replace(/\s/g, '').length > 0){
	todos[index].title = this.editedTodoTitle;
	}else{
	this.editedTodoTitle = '';
	}
	todos[index].isEdit = false;
	},
	toggleEditTodo: function(index, todos){
	todos[index].isEdit = true;
	this.editedTodoTitle = todos[index].title;
	},
	},
	data: function () {
	return {
	editedTodoTitle: '',
	}
	},
	});
	Vue.component('todo-input', {
	props: ['todos'],
	template:
	`<div>
	<input type="text" placeholder="new todo" v-model="newTodoTitle" v-on:keyup.enter="addTodo(todos)" />
	<button v-on:click="addTodo(todos)" >add</button>
	<button v-on:click="clearAllTodos(todos)" :disabled="todos.length < 1">clear all</button>
	</div>`,
	data: function () {
	return {
	newTodoTitle: '',
	}
	},
	methods: {
	addTodo: function(todos){
	if (this.newTodoTitle && this.newTodoTitle.replace(/\s/g, '').length > 0){
	todos.push({ title: this.newTodoTitle, isDone: false, isEdit: false});
	this.newTodoTitle = '';
	}
	},
	clearAllTodos: function(todos){
	while(todos.length > 0){
	todos.pop();
	}
	localStorage.removeItem('vue-demo-app-todo-list');
	},
	},
	});
	var app = new Vue({
	el: '#app',
	data: {
	todos:[],
	},
	watch: {
	todos: function(){
	localStorage.setItem('vue-demo-app-todo-list', JSON.stringify(this.todos));
	}
	},
	mounted: function(){
	this.todos = localStorage.getItem('vue-demo-app-todo-list') ? JSON.parse(localStorage.getItem('vue-demo-app-todo-list')) : [];
	},
	})
	</script>
	</body>
	</html>