Question 22: Scenario\ The component is loaded.\ User clicks "Mark Co…

1<template>
2  <div>
3    <button @click="toggleShowCompleted">
4      {{ showCompleted ? 'Hide' : 'Show' }} Completed
5    </button>
6
7    <ul>
8      <li v-for="task in filteredTasks" :key="task.id">
9        <span>{{ task.name }} - {{ task.status }}</span>
10        <button @click="markComplete(task.id)">Mark Complete</button>
11      </li>
12    </ul>
13
14    <p>Total Completed: {{ completedCount }}</p>
15  </div>
16
17</template>
18
19<script>
20export default {
21  data() {
22    return {
23      showCompleted: false,
24      tasks: [
25        { id: 1, name: 'Learn Vue', status: 'incomplete' },
26        { id: 2, name: 'Build Project', status: 'incomplete' },
27        { id: 3, name: 'Test App', status: 'complete' }
28      ]
29    }
30;

1  },
2  computed: {
3    filteredTasks() {
4      if (this.showCompleted) return this.tasks;
5      return this.tasks.filter(function (task) {
6        return task.status !== 'complete';
7      });
8    },
9    completedCount() {
10      return this.tasks.reduce(function (acc, task) {
11        return acc + (task.status === 'complete' ? 1 : 0);
12      }, 0);
13    }
14  },
15  methods: {
16    markComplete(id) {
17      const task = this.tasks.find(function (t) {
18        return t.id === id;
19      });
20      if (task && task.status === 'incomplete') {
21        task.status = 'complete';
22      }
23    },
24    toggleShowCompleted() {
25      this.showCompleted = !this.showCompleted;
26    }
27  }
28};
29</script>