Wetterstation

In dieser Aufgabe lernst du selbstständig, was `Computed Properties` in Vue sind und wie du sie anwenden kannst.

Aufgabenstellung

Erstelle eine einfache Wetterstation, die eine Temperatur in Celsius, Fahrenheit und Kelvin anzeigt. Zusätzlich soll angezeigt werden, ob der Gefrierpunkt (0°C) unterschritten wurde.

Lösungsschritte

Verwende folgenden Vue Playground als Startpunkt für deine Lösung:

Vue SFC Playgroundsfc.vuejs.org

Vue Playground Vorlage

change Funktion implementieren

Die Vorlage enthält dir bekannte Komponenten:

• Es wird eine celsius Variable definiert, welche im <template> Bereich angezeigt wird.

• Es gibt zwei Buttons, welche die Temperatur erhöhen resp. reduzieren sollen. Die Buttons rufen mit einem @click Event eine change Funktion auf.

Du wirst schnell merken, dass die beiden Buttons noch nicht funktionieren, weil die change Funktion fehlt.

• Erstelle eine change Funktion im <script setup> Teil der Applikation und implementiere die Veränderung der Temperatur.

Temperatur in Fahrenheit anzeigen

Als Nächstes soll die Temperatur in Fahrenheit angezeigt werden.

Die offensichtlichste Lösung für dieses Problem ist es, eine fahrenheit Variable zu erstellen und deren Wert in der change Funktion ebenfalls zu verändern. Doch dies wird schnell umständlich, wenn wir später noch zusätzliche Informationen ergänzen möchten.

Vue bietet dir mit Computed Properties eine deutlich einfachere Möglichkeit, neue Werte auf Basis bestehender Werte zu berechnen.

Computed Properties

Eine Computed Property besteht aus einer Funktion, die einen Wert zurückgibt. In dieser Funktion können beliebige ref Variablen verwendet werden. Jedes Mal, wenn sich eine dieser Variablen verändert, führt Vue automatisch deine Funktion erneut aus, was einen neuen Rückgabewert produziert.

Eine Computed Property wird in Vue wie folgt definiert:

<script setup>
// ⚠ Wichtig: `computed` muss hier importiert werden
import { ref, computed } from 'vue'

const a = ref(1)
const b = ref(2)

// Sobald a oder b sich verändern, wird `result` neu berechnet.
const result = computed(() => {
    return a.value + b.value
})
</script>

<template>
  Das Resultat ist {{ result }}
</template>

Vue SFC Playgroundsfc.vuejs.org

Vue Playground Link für obenstehendes Beispiel

Computed Property fahrenheit implementieren

• Nutze dein neues Wissen und implementiere eine neue fahrenheit Computed Property, die basierend auf dem Wert von celsius die Temperatur in Fahrenheit berechnet.

const fahrenheit = computed(() => {
    return ???;
})

Die Formel zur Berechnung der Temperatur in Fahrenheit lautet:

Fahrenheit = (Celsius * 1.8) + 32

• Ergänze eine Zeile in deiner Wetterstation, in der die Temperatur in Fahrenheit angezeigt wird (siehe Screenshot ganz oben).

computed is not defined?

Erhältst du diese Fehlermeldung, musst du die import Zeile zuoberst im <script> Teil deiner Applikation mit dem obenstehenden Beispiel vergleichen.

Temperatur in Kelvin anzeigen

• Ergänze eine weitere Computed Property, welche die Temperatur in Kelvin anzeigt (siehe Screenshot ganz oben).

Die Formel zur Umrechnung findest du im Internet.

Gefrierpunkt unterschritten

• Ergänze eine weitere Zeile in deiner Wetterstation, die Ja anzeigt, sobald der Gefrierpunkt von 0° C unterschritten wurde. Bei höheren Temperaturen soll Nein angezeigt werden (siehe Screenshot ganz oben).