更新日:

Vue.jsでToDoリストをさくっと作ってみる

スポンサーリンク
Pocket
LINEで送る

Vue.jsを使ってさくっとTodoリストを作っていきます。

デモ

html

<div id="vue-container">
 <input v-model="inputText" type="text" />
 <input class="btn" type="submit" value="追加" v-on:click="itemAdd"/>
 <table>
  <tbody>
   <tr v-for="item in items">
    <td>{{item.name}}</td>
    <td v-on:click="itemDelete(item)" class="delete">削除</td>
   </tr>
  </tbody>
  </table>
</div>

javascript

window.onload = function() { 
  var vm = new Vue({ 
    el:"#vue-container", 
    data:{ 
     items:[ 
            {name:"Todoリストの"},
            {name:"デモ"}, 
            {name:"です"} 
     ] 
    }, 
    methods:{ 
      itemAdd: function(){
        this.items.push({name: this.inputText}); 
      }, 
      itemDelete: function(item){
        this.items.$remove(item);
      } 
    } 
  }); 
}

解説

デモとして初期データを作り、v-forディレクティブで表示させます。

スポンサーリンク

処理1:Todoリスト追加

テキストフィールドに文字を入力し、追加を押すと下のTodoリストに追加されます。
inputにv-modelを設定し、監視させます。
ボタンにはv-on:click=”itemAdd”が設定されているのでボタンを押した時にmethods以下のitemAddが呼ばれます。
配列itemsにテキストフィールドに入力された値を追加するという処理です。

処理2:Todoリスト削除する

Todoリストの削除機能を見ていきます。
削除のelementにはv-on:click=”itemDelete(item)”を設定されているので、クリック時にこのitemDeleteが呼ばれます。
引数にはitemオブジェクトが渡されているので
this.items.$remove(item)で配列itemsの中から対応したデータが削除されます。