Vue.js 入門（TO DO リスト + 削除機能）

以前、Vue.js の演習として TO DO リストを作成しました。

Vue.js 入門（TO DO リスト）

今回はこのアプリに削除機能を追加してみます。

デモサイト

 

１．ViewModelに削除メソッドを追加

削除ボタンが押されたら Item を配列から消す deleteTodo メソッドを追記します。

：
methods: {
    // 追加
    addItem: function(){
       // 配列の末尾に値を追加
        this.todos.push(this.newItem);
        this.newItem = '';
    },
    // 削除
    deleteItem: function(todo) {
        // todos配列の todo から key を取得 
        var index = this.todos.indexOf(todo);
        // key番目から１つ削除
        this.todos.splice(index, 1);
    }
}
：

 

２．View（HTML）に削除ボタンを追加

ゴミ箱アイコンがクリックされたら v-on:click で deleteItemメソッドを呼び出す。

：
<!--ループ処理-->
<ul class="list-group">
    <li class="list-group-item" v-for="todo in todos">@{{ todo }}
        <span class="pull-right">
            <button class="btn btn-xs btn-warning" v-on:click="deleteItem(todo)">
            <span class="glyphicon glyphicon-trash"></span>
            </button>
        </span>
    </li>
</ul>
：

 
以上です。

 

 

 

-周辺知識