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

<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

const tasks = ref([ ... ]);

Creates a reactive array containing task objects with boolean flags.

return tasks.value.filter(task => !task.done);

Iterates through each task and keeps only those where done is false.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Filtering Active Items from a Task List with Array Filter

Related