TODO by Vue.js

index.html

<div id="myApp">
  <p>
    Task:
    <input type="text" v-model="newTask" v-on:keyup.enter="addTask()">
    <button v-on:click="addTask()">ADD</button>
  </p>
  
  <ul>
    <li v-for="todo in todos">
      <input type="checkbox" v-model="todo.isCompleted">
      <span v-bind:class="{ 'complete': todo.isCompleted }">{{ todo.task }}</span>
      <button v-on:click="deleteTask(todo)">Delete</button>
    </li>
  </ul>
  <p>Remaining Tasks: {{ remains }}/{{ todos.length }}</p>
</div>

script.js

new Vue ({
  el: '#myApp',
  data: {
    newTask: '',
    todos: [
      { task: 'buy a book', isCompleted: false },
      { task: 'buy a cake', isCompleted: false },
      { task: 'buy a sugar', isCompleted: true }
    ]
  },
  methods: {
    addTask: function(){
      if(this.newTask==''){
        return;
      } else {
      this.todos.push({
        task: this.newTask,
        isCompleted: false
      });
      this.newTask = '';
      }
    },
    deleteTask: function(todo){
      this.todos.$remove(todo);
    }
  },
  computed: {
    remains: function(){
      var counter = 0;
      for(var i=0; i<this.todos.length; i++){
        if(!this.todos[i].isCompleted){
          counter ++;
        }
      }
      return counter;
    }
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>

style.css

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li{
  margin: 5px;
  text-indent: 0;
}

ul li .complete{
  text-decoration:line-through;
  color: #ddd;
}

todo-by-vue-js.markdown

TODO by Vue.js

A Pen by takanorioki on CodePen.

License.