Vue To-Do list

index.html

<div class="container" id="app">
  <div class="row justify-content-md-center">
    <div class="col">
      <form>
        <fieldset>
          <legend>Add new To-Do</legend>
          <div class="form-group">
            <label>Title:</label>
            <input type="text" class="form-control" v-model="newTask.title">
          </div>

          <div class="form-group">
            <label>Date:</label>
            <input type="date" class="form-control" v-model="newTask.date">
          </div>
        </fieldset>
        <button type="submit" class="btn btn-primary" v-on:click="addTask">Submit</button>
      </form>
      <br/><br />
    </div>
  </div><!-- /. row -->
  <div class="row">
    <div class="col">
      <table class="table" id="taskList">
        <thead>
          <th>#</th>
          <th>Description</th>
          <th>Date</th>
        </thead>
        <tbody>
          <tr class="task" v-for="(task, index) in tasks">
            <th scope="row">{{index}}</th>
            <td>{{ task.title }}</td>
            <td>{{ task.date}}</td>
            <td><button v-on:click="rmTask(task)"  class="btn btn-danger"><i class="fa fa-trash-o" aria-hidden="true"></i></button></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>  
</div>

script.js

var app = new Vue({
  el: "#app",
  data : {
    tasks: [],
    newTask : {
      title: '',
      date: ''
    }
  },
  methods: {
    addTask: function(e){
      e.preventDefault();
      this.tasks.push( {title: this.newTask.title, date: this.newTask.date });
      this.newTask.title = '';
      this.newTask.date = '';
    },
    rmTask: function(task) {
      var index = this.tasks.indexOf(task);
      this.tasks.splice(index, 1);
    }
  }
});

scripts

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

style.css

body {
  padding: 20px;
  margin: 20px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

vue-to-do-list.markdown

Vue To-Do list

A Pen by Gil Sousa on CodePen.

License.