Vue _ April (1)

HTML

<div class="container" id="app">
  <h1> {{ name }}</h1>
  <input type="text" v-model="name" />
  <div class="row">
    <div class="col-sm-12">
        <h1>My Todos{{todoCount}}</h1>
      <ul class="list-group" v-if="todos.length>0">
        <li class="list-group-item" :class="{'completed': item.completed }" v-for="item in orderedUsers">                   
          {{item.title}} 
        <button class="btn btn-warning btn-xs pull-right" @click="deleteTodo(item)">Delete</button>
         <button class="btn btn-xs pull-right margin-right-10" :class="{'btn-success' : item.completed , 'btn-danger' : !item.completed}" @click="completeTodo(item)">{{item.completed ? 'completed':'pending'}}</button>
        </li>
      </ul>
      <div v-else>You don't have any Todos</div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <form @submit.prevent='addNewTodo(newTodo)'>
        <div class="form-group">
          <input type="text" class="form-control" v-model='newTodo.title' placeholder="add a new todos"/>
        </div>
         <div class="form-group">
      <button class="btn btn-success">add Todo</button>
  </div>
      </form>
    </div>
  </div>
</div>

JS

var vue = new Vue({
	el: '#app',
  data: {
  	name: "lxchen",
    todos:[{id:1,title:'Go shopping' , completed:false}],
    newTodo:{id:null,title:'',completed: false}
  },
  methods:{
  	addNewTodo(newTodo){
    	this.todos.push(newTodo);
      this.newTodo = {id:null,title:'',completed: false};
    },
    
    deleteTodo(item){
				var index = this.todos.indexOf(item);
        this.todos.splice(index,1);
    },
    
    completeTodo(item){
    	item.completed = !item.completed
    }
  },
  
  computed: {
 		 orderedUsers: function () {
   
   	<!--  return _.orderBy(this.todos, 'title','asc') -->
    return this.todos
  },
  todoCount(){
  	var count = 0;
   	for(var i=0;i<this.todos.length;i++){
    	if(!this.todos[i].completed){
      	count++;
      }
    }
    if(count===0){
    	count=""
    }
  	return count
  }
}

  
})

CSS

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

vue: 

https://vuejs.org/js/vue.js

bootStrap:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css