Added btton to show all or show only incomplte tasks

Author: rameshovyas

app.js

@@ -3,6 +3,7 @@ let id = 0;
 const app = Vue.createApp({
     data() {
         return {
+          hideCompleted: false,
           newTodo: '',
           todos :[
               {id: ++id, text: 'Try new app in Vue',done:true},
@@ -14,6 +15,11 @@ const app = Vue.createApp({
 
         }
     },
+    computed: {
+        filteredList() {
+            return this.hideCompleted ? this.todos.filter((t)=> !t.done) : this.todos
+        }
+    },
     methods: {
         addTodo() {
             this.todos.push({id: ++id, text: this.newTodo,done:false})

index.html

@@ -14,12 +14,15 @@ <h1>Simple To Do List in Vue-JS 3</h1>
        <input v-model="newTodo"></input>
        <button @click="addTodo()">Add Task</button>
        <ul>
-           <li v-for="todo in todos" :key="todo.id">
+           <li v-for="todo in filteredList" :key="todo.id">
                <input type="checkbox" v-model="todo.done">
                <span :class="{ completed: todo.done }">{{ todo.text }}</span>
                <button @click="removeTodo(todo)">Remove</button>
            </li>
        </ul>
+       <button @click="hideCompleted = !hideCompleted">
+           {{ hideCompleted ? "Show All Tasks" : "Hide Completed Tasks"}}
+       </button>
     </div>
 </body>
 <script src="app.js"></script>

style.css

@@ -6,4 +6,7 @@ body{
 }
 .completed{
     text-decoration: line-through;
-}
+}
+ul{padding:20px 0;margin:0;}
+ul li{list-style: none;padding-bottom: 10px;}
+span{margin-right: 10px;}