code.js 831 B

1234567891011121314151617181920212223242526272829303132333435
  1. const app = new Vue({
  2. el: '#root',
  3. data: {
  4. tasks: [
  5. { description: "Go to the store", completed: true },
  6. { description: "Finish screencast", completed: false },
  7. { description: "Make donation", completed: false },
  8. { description: "Clear inbox", completed: false },
  9. { description: "Make dinner", completed: false },
  10. { description: "Clean room", completed: true },
  11. ],
  12. },
  13. computed: {
  14. completeTasks() {
  15. return this.tasks.filter(task => task.completed);
  16. },
  17. incompleteTasks() {
  18. return this.tasks.filter(task => !task.completed);
  19. }
  20. },
  21. methods: {
  22. onComplete(e) {
  23. this.tasks[e.target.getAttribute('data-key')].completed = true;
  24. },
  25. onIncomplete(e) {
  26. this.tasks[e.target.getAttribute('data-key')].completed = false;
  27. }
  28. }
  29. });