Snippet

Filtern aktiver Elemente aus einer Aufgabenliste mit Array Filter

Die Methode Array.prototype.filter() erstellt eine flache Kopie eines Teils eines Arrays, gefiltert nach allen Elementen, die den Test der übergebenen Callback-Funktion bestehen. In Vue sorgt die Verwendung von filter innerhalb einer Computed Property dafür, dass die aktive Liste automatisch neu berechnet wird, sobald sich die Aufgabenliste oder der Erledigungsstatus ändert.

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

Erklärung

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

Erstellt ein reaktives Array mit Aufgaben-Objekten, die boolesche Flags enthalten.

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

Iteriert durch jede Aufgabe und behält nur diejenigen, bei denen done false ist.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Filtern aktiver Elemente aus einer Aufgabenliste mit Array Filter

Verwandt