Permalink
Browse files

Clearing completed tasks & conditional rendering with `v-show`

  • Loading branch information...
amejiarosario committed Aug 13, 2018
1 parent 24ae5a0 commit dd7dd908829489f6b897791c738937f68862083a
Showing with 7 additions and 2 deletions.
  1. +6 −0 app.js
  2. +1 −2 index.html
6 app.js
@@ -31,10 +31,16 @@ const todoApp = new Vue({
const index = this.todos.indexOf(todo);
this.todos.splice(index, 1);
},
clearCompleted() {
this.todos = this.activeTodos;
}
},
computed: {
activeTodos() {
return this.todos.filter(t => !t.isDone);
},
completedTodos() {
return this.todos.filter(t => t.isDone);
}
}
});
@@ -58,8 +58,7 @@ <h1 v-text="title"></h1>
</li>
</ul>
<!-- Hidden if no completed items are left ↓ -->
<button class="clear-completed">Clear completed</button>
<button class="clear-completed" @click="clearCompleted" v-show="completedTodos.length">Clear completed</button>
</footer>
</section>

0 comments on commit dd7dd90

Please sign in to comment.