javascript / beginner
Snippet
Filtering Incomplete Tasks with Array Filter in Vue
The standard JavaScript Array.prototype.filter() method creates a new array containing all elements that pass a test condition. Inside a Vue computed property, filter returns only the task objects where done is false, updating automatically whenever the reactive tasks array 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: 'Learn JavaScript', done: true },{ id: 2, text: 'Master Vue', done: false },{ id: 3, text: 'Build an App', done: false }]);const pendingTasks = computed(() => {return tasks.value.filter(task => !task.done);});</script>
vue
Breakdown
1
const tasks = ref([ ... ]);
Initializes a reactive list of task objects with id, text, and boolean done status.
2
const pendingTasks = computed(() => {
Defines a derived reactive computed property that recalculates when tasks change.
3
return tasks.value.filter(task => !task.done);
Uses the JavaScript filter method with an arrow function to extract only incomplete tasks.