【Vue.js入門】07_Todoアプリの作成

Vue.js入門第7回。今までの復習も兼ねてVue.jsを使ってTodoアプリを実装してみます。

Todoアプリの仕様

シンプルな仕様です。データの永続化は無視して、単純にVue.jsに絞った内容です。

Todoを追加できる
追加したTodoを削除できる
Todoが完了したらチェック済にすることができる

ソースコード

解説

追加するTodoのためのnewItemプロパティと、追加されたTodoを管理するtodosプロパティを作成します。

data: {
    newItem: '',
    todos: []
},

Todo追加、削除用の関数として、addItem、deleteItem関数を用意します。

addItemについてはタスク名の空文字で追加できないように抑止しています。タスク名が設定されていれば未完了（isDone=false）の状態でタスクを追加します。

deleteItemでは単純にtodos配列の要素を削除しています。

methods:{
    addItem: function(e) {
        if(this.newItem == '') return;
        var todo = {
            item: this.newItem,
            isDone: false
        }
        this.todos.push(todo);
        this.newItem = '';
    },
    deleteItem: function(index) {
        this.todos.splice(index, 1);
    }
}

HTMLでは、formタグのsubmitイベントを抑止しています。JavascriptのpreventDefaultと同じです。

タスク追加用のaddItemを呼び出すボタンと、現在保存されているタスクの一覧表示を行なっています。

また、それぞれのタスクの完了を示すためのチェックボックスと、削除するためのdeleteItem関数を呼び出すボタンを表示しています。

<form v-on:submit.prevent>
    <input type="text" v-model="newItem">
    <button v-on:click="addItem">Add</button>
</form>
<ul>
    <li v-for="(todo, index) in todos">
        <input type="checkbox" v-model="todo.isDone">
        <span v-bind:class="{done: todo.isDone}">{{ todo.item }}</span>
        <button v-on:click="deleteItem(index)">Delete</button>
    </li>
</ul>