Verwendung von Vue berechneten Eigenschaften

Verwendung von berechneten Eigenschaften

Das Ziel hier ist es, einen Zusammenfassungszähler für unsere Aufgabenliste hinzuzufügen. Dies kann für Benutzer nützlich sein und dient auch dazu, die Liste für unterstützende Technologien zu kennzeichnen. Wenn wir 2 von 5 Aufgaben in unserer Aufgabenliste abgeschlossen haben, könnte unsere Zusammenfassung "2 von 5 Aufgaben abgeschlossen" lauten. Obwohl es verlockend sein könnte, so etwas wie dies zu tun:

<h2>
  {{ToDoItems.filter(item =&gt; item.done).length}} out of
  {{ToDoItems.length}} items completed
</h2>

würde es bei jedem Render neu berechnet werden. Für eine kleine App wie diese spielt das wahrscheinlich keine große Rolle. Für größere Apps oder wenn der Ausdruck komplizierter ist, könnte das ein ernstes Performanceproblem darstellen.

Eine bessere Lösung ist die Verwendung von berechneten Eigenschaften von Vue. Berechnete Eigenschaften funktionieren ähnlich wie Methoden, werden jedoch nur dann erneut ausgeführt, wenn sich eine ihrer Abhängigkeiten ändert. In unserem Fall würde sie nur dann erneut ausgeführt, wenn sich das ToDoItems Array ändert.

Um eine berechnete Eigenschaft zu erstellen, müssen wir der Komponentenobjekt eine computed-Eigenschaft hinzufügen, ähnlich der methods-Eigenschaft, die wir zuvor verwendet haben.

Hinzufügen eines Zusammenfassungszählers

Fügen Sie den folgenden Code zu Ihrem App-Komponentenobjekt hinzu, unterhalb der methods-Eigenschaft. Die Listen-Zusammenfassungsmethode ermittelt die Anzahl der fertigen ToDoItems und gibt einen String zurück, der dies meldet.

export default {
  // …
  computed: {
    listSummary() {
      const numberFinishedItems = this.ToDoItems.filter(
        (item) => item.done,
      ).length;
      return `${numberFinishedItems} out of ${this.ToDoItems.length} items completed`;
    },
  },
  // …
};

Nun können wir {{listSummary}} direkt in unsere Vorlage einfügen; wir werden dies innerhalb eines <h2>-Elements hinzufügen, direkt über unserem <ul>. Wir werden auch eine id und ein aria-labelledby-Attribut hinzufügen, um den <h2>-Inhalt als Label für das <ul>-Element zuzuweisen.

Fügen Sie das beschriebene <h2>-Element hinzu und aktualisieren Sie das <ul> in Ihrer App-Vorlage wie folgt:

<h2 id="list-summary">{{listSummary}}</h2>
<ul aria-labelledby="list-summary" class="stack-large">
  <li v-for="item in ToDoItems" :key="item.id">
    <to-do-item
      :label="item.label"
      :done="item.done"
      :id="item.id"></to-do-item>
  </li>
</ul>

Sie sollten jetzt die Listenzusammenfassung in Ihrer App sehen und die Gesamtanzahl der Aufgaben aktualisiert sich, während Sie weitere Aufgaben hinzufügen! Wenn Sie jedoch versuchen, einige Aufgaben an- und abzuwählen, wird ein Fehler offenbart. Derzeit verfolgen wir die "done"-Daten nicht in irgendeiner Weise, sodass sich die Anzahl der erledigten Aufgaben nicht ändert.

Nachverfolgung von Änderungen an "done"

Wir können Ereignisse verwenden, um die Aktualisierung des Kontrollkästchens zu erfassen und unsere Liste entsprechend zu verwalten.

Da wir uns nicht auf einen Knopfdruck verlassen, um die Änderung auszulösen, können wir einen @change-Ereignishandler an jedes Kontrollkästchen anhängen, anstatt v-model zu verwenden.

Aktualisieren Sie das <input>-Element in ToDoItem.vue, sodass es wie folgt aussieht:

<input
  type="checkbox"
  class="checkbox"
  :id="id"
  :checked="isDone"
  @change="$emit('checkbox-changed')" />

Da wir nur mit emit() inline mitteilen müssen, dass das Kontrollkästchen aktiviert wurde, können wir dies inline tun.

Fügen Sie in App.vue eine neue Methode namens updateDoneStatus() hinzu, unterhalb Ihrer addToDo()-Methode. Diese Methode sollte einen Parameter entgegennehmen: die id des Aufgabenitems. Wir möchten das Element mit der passenden id finden und seinen done-Status auf das Gegenteil seines aktuellen Status aktualisieren:

export default {
  // …
  methods: {
    // …
    updateDoneStatus(toDoId) {
      const toDoToUpdate = this.ToDoItems.find((item) => item.id === toDoId);
      toDoToUpdate.done = !toDoToUpdate.done;
    },
    // …
  },
  // …
};

Wir möchten diese Methode ausführen, wann immer ein ToDoItem ein checkbox-changed-Ereignis auslöst, und seine item.id als Parameter übergeben. Aktualisieren Sie Ihren <to-do-item></to-do-item>-Aufruf wie folgt:

<to-do-item
  :label="item.label"
  :done="item.done"
  :id="item.id"
  @checkbox-changed="updateDoneStatus(item.id)">
</to-do-item>

Wenn Sie jetzt ein ToDoItem abhaken, sollten Sie sehen, dass die Zusammenfassung entsprechend aktualisiert wird!

Zusammenfassung

In diesem Artikel haben wir eine berechnete Eigenschaft verwendet, um unserer App ein schönes kleines Feature hinzuzufügen. Wir haben jedoch größere Herausforderungen vor uns – im nächsten Artikel werden wir uns das bedingte Rendering ansehen und wie wir es nutzen können, um ein Bearbeitungsformular anzuzeigen, wenn wir vorhandene Aufgaben bearbeiten möchten.

• Zurück
• Übersicht: JavaScript-Frameworks und -Bibliotheken
• Weiter