javascript / beginner
Snippet
Filtern von Listenelementen mit Array-Filter in Computed Properties
Die Funktion computed() überwacht reaktive Abhängigkeiten und berechnet sich automatisch neu, wenn diese sich ändern. Die Verwendung der nativen JavaScript-Methode Array.prototype.filter() innerhalb einer Computed Property ermöglicht das Ableiten einer Liste offener Aufgaben, ohne das ursprüngliche reaktive Array zu verändern.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
import { ref, computed } from 'vue';const tasks = ref([{ id: 1, title: 'Write tests', isDone: true },{ id: 2, title: 'Review pull request', isDone: false }]);const pendingTasks = computed(() => {return tasks.value.filter(task => !task.isDone);});
vue
Erklärung
1
const tasks = ref([
Deklariert ein reaktives Array, das Aufgaben-Objekte enthält.
2
const pendingTasks = computed(() => {
Erstellt eine gecachte Computed Property, die sich neu berechnet, sobald sich tasks ändert.
3
return tasks.value.filter(task => !task.isDone);
Verwendet die native filter-Methode, um nur Aufgaben zurückzugeben, bei denen isDone false ist.