todo_app

My practice.

by naoki85

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<table id="tasks-index" class="table table-striped">
  <thead>
    <tr>
      <th>Name</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="task in tasks" v-if="!task.isDeleted">
      <td>{{ task.name }}</td>
      <td>
        <div class="btn btn-danger" v-on:click="doneTask(task.id)">Done!</div>
      </td>
    </tr>
    <tr>
      <td><input v-model="newTask" class="form-control"></td>
      <td>
        <div class="btn btn-default" v-on:click="createTask">Create Task</div>
      </td>
    </tr>
  </tbody>
</table>

JavaScript

var vm = new Vue({
  el: '#tasks-index',
  data: {
    tasks: [
      { id: 1, name: 'Studying JavaScript', isDeleted: false },
      { id: 2, name: 'Studying PHP',        isDeleted: false },
      { id: 3, name: 'Studying Ruby',       isDeleted: false },
    ],
    newTask: '',
  },
  methods: {
    createTask: function () {
      var new_id = this.tasks[this.tasks.length - 1].id + 1;
      this.tasks.push({ id: new_id, name: this.newTask, isDeleted: false });
      this.newTask = '';
    },
    doneTask: function (task_id) {
      this.tasks.forEach(function (task) {
        if (task.id === task_id) {
          return task.isDeleted = true;
        }
      })
    }
  }
})
 
window.vm = vm;