javascript / beginner
Snippet
Filtering Active Items from a Task List with Array Filter
The Array.prototype.filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided callback function. In Vue, pairing filter inside a computed property ensures the active list re-evaluates automatically whenever the underlying task list or any task's completion status changes.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
<script setup>import { ref, computed } from 'vue';const tasks = ref([{ id: 1, text: 'Buy groceries', done: false },{ id: 2, text: 'Clean kitchen', done: true },{ id: 3, text: 'Pay bills', done: false }]);const activeTasks = computed(() => {return tasks.value.filter(task => !task.done);});</script>
vue
Breakdown
1
const tasks = ref([ ... ]);
Creates a reactive array containing task objects with boolean flags.
2
return tasks.value.filter(task => !task.done);
Iterates through each task and keeps only those where done is false.