zanko

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>
    <style>
        .is-loading{background:red; }
    </style>

</head>
<body>
    <div id="root">
        <h1>All tasks</h1>

      <ul v-for="task in tasks" :id ="task.id">
          <li v-text="task.description"></li>
          <button :id="task.id" @click='finish($event, task.id)'>Done</button>
          <button :id="task.id" @click='unfinish($event, task.id)'>Not Done</button>
      </ul>
      <h1>Complete tasks</h1>

      <ul>
          <li v-for="task in completeTasks" v-text="task.description">

          </li>
      </ul>

      <h1>Incomplete tasks</h1>

      <ul>
          <li v-for="task in incomleteTasks" v-text="task.description">

          </li>
      </ul>


    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


    <script>

        new Vue ({
           el:'#root',
           data:{

            tasks:[
                {id:0 ,description: 'Go to the store', completed: true},
                {id:1 ,description: 'Napraj ova', completed: false},
                {id:2 ,description: 'Napraj ona', completed: false},
                {id:3 ,description: 'Napraj vamu', completed: false},
                {id:4 ,description: 'Napraj tamu', completed: false},
                {id:5 ,description: 'Skini picka', completed: true},
            ]
           },
           methods:{
            finish(event, id){
                this.tasks[id].completed = true;
            },
            unfinish(event, id){
                this.tasks[id].completed = false;
            }
           },
           computed:{
            incomleteTasks(){
                return this.tasks.filter(task => ! task.completed);
            },
            completeTasks(){
                return this.tasks.filter(task =>  task.completed);
            }
           }
        });

    </script>

</body>
</html>