Vue.js~ToDoリスト④~

今秋は、前回つけた削除機能に完了したときに横線が入るように実装していきたいと思います。

HTMLでの実装は以下のようになります。

index.html

<ul>
      <li v-for="(todo,index) in todos">
        <input type="checkbox" v-model="todo.isDone"> 
        <span v-bind:class="{done: todo.isDone}">{{index}}:{{ todo.title }}</span>
        <span class="delete-button" v-on:click="deleteItem(index)">✗</span>
      </li>
    </ul>

今回は完了チェックを付けやすいように、チェックボックスを付けたいと思います。
また、v-modelとtodo.isDoneを紐付けておきます。
今回はv-vindというディレクティブを使っていきます。
v-bind:classにオブジェクトを渡すことで、動きを付けてくれます。
今回は、データに応じて動きを変えたいので、spanタグを使いDoneのときの動きを付けていきます。

ここで、js側の実装をみていきます。

index.js

newItem: '',
    todos:  [{
      title: 'title1',
      isDone:false},{
        title:'title2',
        isDone:false},{
          title:'title3',
          isDone:true
        }]
  },
  methods: {
    UPItem: function() {
      const item = {
        title:this.newItem,
        isDone:false
      };
      this.todos.push(item);
      this.newItem = '';
    },

既存のデータを作っていきます。
false▶正しくない true▶正しい　という値になります。
今回の記述内容は、タスク１，２は完了していない、タスク3は完了しているよって感じです。
ブラウザ上ではこのような感じになります。

メソッドの方をみていきましょう！！これは追加の場合の処理になります。
変数を宣言し、追加されても完了の状態では無いようにisDone:falseを追加します！！
これで、追加から完了までの機能実装することができました！！😊