javascript / beginner
Snippet
Validierung von numerischen Eingaben mit Try-Catch-Blöcken
Die Verwendung von `try...catch` in Vue-Event-Handlern ermöglicht die saubere Behandlung von Laufzeit- und Validierungsfehlern. Durch das Abfangen ungültiger Eingaben und Speichern benutzerfreundlicher Meldungen in einer reaktiven Variable bleibt die Anwendung stabil.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { ref } from 'vue';const age = ref(0);const errorMessage = ref('');function updateAge(input) {try {const parsed = Number(input);if (Number.isNaN(parsed) || parsed < 0) {throw new Error('Please provide a valid positive number.');}age.value = parsed;errorMessage.value = '';} catch (err) {errorMessage.value = err.message;}}
vue
Erklärung
1
try {
Startet einen Ausführungsblock zur Überwachung von Validierungs- oder Konvertierungsfehlern.
2
const parsed = Number(input);
Versucht, den eingegebenen Wert in eine Zahl umzuwandeln.
3
throw new Error('Please provide a valid positive number.');
Erzeugt und wirft einen expliziten Fehler, falls die Validierung fehlschlägt.
4
catch (err) {
Fängt den geworfenen Fehler ab, um die Nachricht im reaktiven Zustand zu speichern.