Snippet

Filtern aktiver Aufgaben mit Array Filter in Vue

Die Methode Array.prototype.filter() erstellt eine flache Kopie eines Arrays, die nur jene Elemente enthält, die die Bedingung der übergebenen Funktion erfüllen. In Vue stellt die Kombination von filter() mit einer Computed Property sicher, dass die gefilterte Liste reaktiv neu berechnet wird, wenn sich das Original-Array ändert.

snippet.js

javascript

import { ref, computed } from 'vue';
 
export default {
  setup() {
    const todos = ref([
      { id: 1, text: 'Buy groceries', done: false },
      { id: 2, text: 'Clean kitchen', done: true },
      { id: 3, text: 'Read book', done: false }
    ]);
 
    const activeTodos = computed(() => {
      return todos.value.filter(todo => !todo.done);
    });
 
    return { todos, activeTodos };
  }
};

vue

Erklärung

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

Definiert ein reaktives Array aus Aufgabenobjekten mit einem Status-Flag für die Fertigstellung.

return todos.value.filter(todo => !todo.done);

Iteriert durch die Liste und gibt ein neues Array mit Einträgen zurück, bei denen 'done' false ist.

Vorheriges Snippet Nächstes Snippet

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

Filtern aktiver Aufgaben mit Array Filter in Vue

Verwandt