Vue-todo(二)

Vue版本为v2.3.3，使用UI框架为bulma(v0.5.3)，使用LocalStorage实现本地存储
待实现的功能：拖拽、修改、删除

<div id="todo-list-example">
    <div class="field has-addons">
        <div class="control">
            <input class="input" v-model="newTodoText" @keyup.enter="addNewTodo" placeholder="Add a todo">
        </div>
        <div class="control">
            <a class="button is-info" @click="clear">clear</a>
        </div>
    </div>
    <p class="title is-5">正在进行</p>
    <ul>
        <li v-if="!todo.done" v-for="(todo, index) in todos" :key="index" :class="{done: todo.done}" @click="toggleDone(todo)">
            <input type="checkbox" :checked="todo.done">{{todo.title}}</li>
    </ul>
    <hr>
    <p class="title is-5">已完成</p>
    <ul>
        <li v-if="todo.done" v-for="(todo, index) in todos" :key="index" :class="{done: todo.done}" @click="toggleDone(todo)">
            <input type="checkbox" :checked="todo.done">{{todo.title}}</li>
    </ul>
</div>

const STORAGE_KEY = 'todo';
var store = {
    fetch() {
        return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
    },
    save(items) {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
    }
}

new Vue({
    el: "#todo-list-example",
    data: {
        newTodoText: "",
        todos: store.fetch()
    },
    methods: {
        addNewTodo() {
            if (this.newTodoText.trim() === "") return;
            this.todos.push({
                title: this.newTodoText,
                done: false
            });
            this.newTodoText = "";
        },
        toggleDone(todo) {
            todo.done = !todo.done;
        },
        remove() {
            this.todos.splice(this.index, 1);
        },
        clear() {
            localStorage.clear();
        }
    },
    watch: {
        todos: {
            handler(todos) {
                store.save(todos);
            },
            deep: true
        }
    }
});