Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <title>JS Bin</title>
</head>
​
<body class="container-fluid">
  <div id="app">
    <hr>
     <div class="col-xs-12">
     
     
     <div class="panel panel-default">
       <form class="panel-body"
             v-on:submit.prevent="addTask()">
         <div class="input-group">
           <input type="text"
                  class="form-control"
                  v-model="newTask.title">
           <span class="input-group-btn">
             <button class="btn btn-primary"
                     :disabled="!canAddnewTask"
                     v-on:click="addTask()"
                     type="button">Add</button>
           </span>
         </form>
       </div>
     </div>  
​
     <table class="table">
       <thead>
         <tr>
           <th colspan="2">Estados</th>
           <th colspan="">Ações</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="(task, index) in tasks">
           <td :class="{'xyz' : task.completed}">
             <input type="checkbox"
                    v-model="task.completed">
           </td>
           <td :class="{'xyz' : task.completed}">{{ task.title }}</td>
           <td class="btn btn-danger btn-xs">
             <i class='glyphicon glyphicon-remove' @click="removeTask(index)"></i>
           </td>
         </tr>
       </tbody>
      </table>
    </div>
​
    <hr>
    
    <pre>{{ newTask }}</pre>
    <pre>{{ tasks }}</pre>
  
  </div>
</body>
</html>
​
 
.xyz {
  background: #dddddd;
  text-decoration: line-through;
}
 
// Função para clonar o objeto fazendo com que o
// antigo perca sua referencia.
const clone = (obj) => JSON.parse(JSON.stringify(obj));
​
new Vue({
  el: '#app',
  data: {
    tasks: [
      {
        title: 'Task01',
        completed: false,
      },
      {
        title: 'Task02',
        completed: false,
      }
    ],
    newTask: {title: '', completed: false},
  },
  computed: {
    canAddnewTask() {
      return this.newTask.title.length > 0;
    }
  },
  methods: {
    addTask(){
      if(this.canAddnewTask) {
        const task = clone(this.newTask)
        this.tasks.unshift(task);
        this.newTask = {title: '', completed: false};
      }
    },
    removeTask(index) {
      console.log(index)
      if(index > -1){
        this.tasks.splice(index, 1); 
      }      
    }
  }
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
aristotelesbr2014pro
0viewers