Vue-Fehler: Das berechnete Attribut kann nicht korrekt für die Datenberechnung verwendet werden.

Vue-Fehler: Das berechnete Attribut kann nicht korrekt für die Datenberechnung verwendet werden. Wie lässt sich das Problem beheben?

Bei der Entwicklung mit Vue ist das berechnete Attribut eine sehr häufig verwendete und leistungsstarke Funktion, die uns bei der Berechnung und Verarbeitung von Daten helfen kann. Aber manchmal stoßen wir auf einige Probleme, wie zum Beispiel, dass wir das berechnete Attribut nicht korrekt für die Datenberechnung verwenden können. Zu diesem Zeitpunkt müssen wir dieses Problem lösen.

Hier ist ein einfaches Beispiel, um dieses Problem zu veranschaulichen:

<template>
  <div>{{ result }}</div>
</template>

<script>
export default {
  data() {
    return {
      num1: 10,
      num2: 20
    }
  },
  computed: {
    result() {
      return this.num1 + this.num2;
    }
  }
}
</script>

In diesem Beispiel wollen wir die Summe von num1 und num2 berechnen und das Ergebnis auf der Seite anzeigen. Als wir diesen Code jedoch ausführten, stellten wir fest, dass die Seite nicht die erwarteten Ergebnisse anzeigte.

Der Grund für dieses Problem liegt darin, dass Vue bei der Berechnung der berechneten Eigenschaft anhand der Abhängigkeitsbeziehung beurteilt, wann eine Neuberechnung durchgeführt werden muss. In diesem Beispiel haben wir Vue nicht explizit mitgeteilt, dass num1 und num2 Abhängigkeiten der berechneten Eigenschaft sind, sodass Vue nicht automatisch die Neuberechnung der berechneten Eigenschaft auslöst.

Um dieses Problem zu lösen, müssen wir num1 und num2 als Abhängigkeiten des berechneten Attributs deklarieren. Um dies zu erreichen, können wir die von Vue bereitgestellten Getter und Setter verwenden:

<template>
  <div>{{ result }}</div>
</template>

<script>
export default {
  data() {
    return {
      num1: 10,
      num2: 20
    }
  },
  computed: {
    result: {
      get() {
        return this.num1 + this.num2;
      },
      set(value) {
        const [num1, num2] = value.split("+");
        this.num1 = parseInt(num1);
        this.num2 = parseInt(num2);
      }
    }
  }
}
</script>

In diesem Beispiel deklarieren wir num1 und num2 als Abhängigkeiten, indem wir Getter und Setter in der berechneten Eigenschaft verwenden. Im Getter addieren wir num1 und num2 und geben das Ergebnis zurück. Im Setter können wir durch String-Parsing einen neuen Wert erhalten und die Werte von num1 und num2 aktualisieren.

Wenn wir mit dieser Änderung den Wert von num1 oder num2 ändern, löst Vue automatisch die Neuberechnung des berechneten Attributs aus und zeigt das neue Ergebnis auf der Seite an.

Neben der Verwendung von Gettern und Settern zum Deklarieren von Abhängigkeiten besteht eine einfachere Möglichkeit darin, das von Vue bereitgestellte Watch-Attribut zu verwenden, um Änderungen in Num1 und Num2 zu überwachen und Berechnungen durchzuführen, wenn sie sich ändern. Der Code lautet wie folgt:

<template>
  <div>{{ result }}</div>
</template>

<script>
export default {
  data() {
    return {
      num1: 10,
      num2: 20
    }
  },
  computed: {
    result() {
      return this.num1 + this.num2;
    }
  },
  watch: {
    num1(newValue) {
      this.result = newValue + this.num2;
    },
    num2(newValue) {
      this.result = this.num1 + newValue;
    }
  }
}
</script>

In diesem Beispiel verwenden wir das watch-Attribut, um auf Änderungen in num1 und num2 zu warten und den Wert des Ergebnisses neu zu berechnen, wenn er sich ändert. Auf diese Weise wird das Ergebnis unabhängig davon, ob sich Num1 oder Num2 ändert, neu berechnet und das neue Ergebnis auf der Seite angezeigt.

Durch die beiden oben genannten Methoden können wir das Problem lösen, dass das berechnete Attribut nicht korrekt für die Datenberechnung verwendet werden kann, und die auf der Seite angezeigten Ergebnisse korrekt aktualisieren.

Zusammenfassend lässt sich sagen, dass das Problem, dass das berechnete Attribut nicht korrekt für die Datenberechnung verwendet werden kann, normalerweise dadurch verursacht wird, dass Abhängigkeiten nicht explizit angegeben werden. Wir können Abhängigkeiten über Getter und Setter oder Uhren deklarieren und den Wert der berechneten Eigenschaft neu berechnen, wenn sich die Abhängigkeit ändert. Auf diese Weise können wir das berechnete Attribut korrekt verwenden, um Datenberechnungen durchzuführen und die Ergebnisse auf der Seite anzuzeigen.

Das obige ist der detaillierte Inhalt vonVue-Fehler: Das berechnete Attribut kann nicht korrekt für die Datenberechnung verwendet werden.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!