【Vue.js】No.005 簡易Todoリストを作ってみる
コード解説
テキストフィールドに入力してエンターを押した瞬間に、上にTodoが追加されていく仕様で実装してみたいと思います。
ひとまずHTMLは以下のようにします。
<div id="test1">
<input type="text" name="todoname" v-model="todoName" v-on:keyup.enter="addTodo">
<ul>
<li v-for="( todo, index ) in todos">
<strong>{{ todo.date }}</strong>: {{ todo.name }}
<button v-on:click="removeTodo( index )">X</button>
</li>
</ul>
</div>
テキストフィールドが一つあり、追加されたTodoがリストでループ表示されていく想定ですね。
後は、それぞれのTodoには削除ボタンも備わっています。
処理の流れ的には…テキストフィールドにてエンターが押された時点でaddTodoというTodo追加の関数が実行される。
Xボタンが押された時点でremoveTodoというTodo削除の関数が実行される。という感じです。
それでは、JS側を見てみましょう。
new Vue( {
el: '#test1',
data: {
todoName: '',
todos: [
{ date: '2017/00/00 00:00:00', name: 'Todoを追加してください。' }
]
},
methods: {
// Todoを追加する関数
addTodo: function(){
// 現在の日付情報取得
nowDate = new Date();
// 各情報を変数に格納
year = nowDate.getFullYear();
month = nowDate.getMonth()+1;
date = nowDate.getDate();
hours = nowDate.getHours();
minute = nowDate.getMinutes();
second = nowDate.getSeconds();
// 0埋め処理
month = ( '0' + month ).slice( -2 );
date = ( '0' + date ).slice( -2 );
hours = ( '0' + hours ).slice( -2 );
minute = ( '0' + minute ).slice( -2 );
second = ( '0' + second ).slice( -2 );
// 日付と名前を配列に追加
this.todos.unshift( { date: year+'/'+month+'/'+date+' '+hours+':'+minute+':'+second, name: this.todoName } );
// テキストボックス初期化
this.todoName = '';
},
// Todoを削除する関数
removeTodo: function( index ){
this.todos.splice( index, 1 );
}
}
} );
今回、追加された時点のタイムスタンプも表示されるよう組んでみたので、若干記述が長いですね。
todosという配列を設けており、addTodoが実行されたタイミングで、タイムスタンプとテキストフィールドの値を配列の一番上に挿入。
removeTodoが実行されたタイミングで、該当する順番の配列を削除。という流れになります。
挙動を確認してみる
- {{ todo.date }}: {{ todo.name }}