Learning Vuejs 2

Second tutorial code for Learning Vue JS

by Edward Tanguay

HTML

<script src="https://vuejs.org/js/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<div class="container" id="vue-app">
  <div class="row">
    <div class="col-sm-12">
      <h1>Todos: {{todoCount}}</h1>
      
      <ul class="list-group" v-if="todos.length > 0">
        <li class="list-group-item" 
            v-bind:class="{ 'completed' : todo.completed }"
            v-for="todo in todos | orderBy 'title' 1">
          {{todo.title}}
          <button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(todo)">Delete</button>
          <button class="btn btn-xs pull-right margin-right-10" 
            v-bind:class="{'btn-success' : todo.completed, 'btn-danger' : !todo.completed}"
            v-on:click="todoCompleted(todo)">{{todo.completed ? 'Completed' : 'Pending'}}</button>
        </li>
      </ul>
      
      <div v-else><p>You don't have any Todos</p></div>
    </div>
  </div>
  
  <div class="row">
    <div class="col-sm-12">
      <form v-on:submit.prevent="addNewTodo(newTodo)">
        <div class="form-group">
          <input 
            type="text" 
            v-model="newTodo.title"
            class="form-control" 
            placeholder="Add a new Todo">
        </div>
        
        <div class="form-group">
          <button class="btn btn-success">Add Todo</button>
        </div>
      </form>
    </div>
  </div>
</div>

CSS

li.completed {
  text-decoration: line-through;
}
.margin-right-10 {
  margin-right: 10px;
}

JavaScript

new Vue({
	el: '#vue-app',
  
  data: {
  	todos: [{id: 1, title: 'Go Shopping', completed: true}],
    newTodo: {id: null, title: '', completed: false}
  },
  
  computed: {
  	todoCount() {
    	return this.todos.length
    }
  },
  
  methods: {
  	addNewTodo(newTodo) {
    	this.todos.push(newTodo)
      this.newTodo = {id: null, title: '', completed: false}
    },
    
    deleteTodo(todo) {
      this.todos.$remove(todo)
    },
    
    todoCompleted(todo) {
    	todo.completed = !todo.completed
    }
  }
});