【学習メモ】動かして学ぶ！Vue.js 開発入門 その9

Chapter11 ToDoリストを作ってみよう

<div id="app">
  <!-- ToDoリスト -->
  <div v-for="todo in todos">
    <label>
      <input type="checkbox" v-model="todo.done">
      <span v-bind:class="{donestyle:todo.done}">{{ todo.text }}</span>
    </label>
  </div>
  <input type="text" v-model.trim="addtext" v-on:keyup.enter="addToDo" placeholder="すること">
  <p><button v-on:click="cleanToDo">処理済みを削除</button></p>
  <p>{{ remaining }} / {{ todos.length }}件処理</p>
</div>

new Vue({
  el: "#app",
  data: {
    addtext: '',
    todos: [
      {
        done: false,
        text: 'パンを買う'
      },
      {
        done: false,
        text: 'コーヒーを買う'
      }
    ]
  },
  computed: {
    // `todo` 配列から `filter` メソッドで `done` の値が `true` のものだけ取り出してその個数を返す
    remaining: function () {
      return this.todos.filter(function (val) {
        return val.done;
      }).length;
    }
  },
  methods: {
    // `done` の値を `false` にして、textに `this.addtext` を設定したオブジェクトを、`this.todos` 配列に追加
    addToDo: function () {
      if (this.addtext) {
        this.todos.push({
          done: false,
          text: this.addtext
        });
        this.addtext = '追加しました'; // 追加したら input要素を空にするために `this.addtext` を空にする
      }
    },
    // `this.todo` の `done` が `false` だけのものが残るようにフィルターをかけて、`this.todos` に入れ直します。
    cleanToDo: function () {
      this.todos = this.todos.filter(function (val) {
        return val.done == false;
      })
    }
  }
});

/* ToDoリスト */
.donestyle {
  text-decoration: line-through;
  color: lightgray;
}

結果