javascript / beginner
Snippet
Filtern unvollständiger Aufgaben mit Array Filter in Vue
Die Standardmethode Array.prototype.filter() in JavaScript erstellt ein neues Array mit allen Elementen, die eine Prüfbedingung erfüllen. Innerhalb einer berechneten Vue-Eigenschaft liefert filter nur die Aufgabenobjekte zurück, bei denen done false ist, und aktualisiert sich automatisch bei Änderungen.
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
Erklärung
1
const tasks = ref([ ... ]);
Initialisiert eine reaktive Liste von Aufgabenobjekten mit ID, Text und booleschem done-Status.
2
const pendingTasks = computed(() => {
Definiert eine abgeleitete reaktive berechnete Eigenschaft, die neu kalkuliert wird, wenn sich tasks ändert.
3
return tasks.value.filter(task => !task.done);
Nutzt die JavaScript-Methode filter mit einer Pfeilfunktion, um nur unvollständige Aufgaben zu extrahieren.