Snippet

Absichern tiefer verschachtelter Profildaten-Zugriffe mit Optional Chaining in Vue

Optional Chaining (?.) stoppt die Auswertung und gibt undefined zurück, wenn eine Referenz null oder undefined ist. Dies verhindert TypeError-Abstürze beim Zugriff auf tief verschachtelte Eigenschaften. In Kombination mit Nullish Coalescing (??) bietet es einen sauberen Fallback für asynchrone Daten in Vue.

snippet.js

javascript

import { ref, computed } from 'vue';
 
const userData = ref({
  name: 'Sarah',
  account: null
});
 
const userCity = computed(() => {
  return userData.value.account?.address?.city ?? 'City Not Provided';
});

vue

Erklärung

const userData = ref({

Erstellt ein reaktives Objekt, in dem verschachtelte Strukturen wie account anfänglich null sein können.

const userCity = computed(() => {

Leitet einen sicheren Anzeigewert aus der verschachtelten Datenstruktur ab.

return userData.value.account?.address?.city ?? 'City Not Provided';

Navigiert sicher durch account und address ohne Fehler, falls account null ist, und nutzt eine Standard-Zeichenkette als Fallback.

Vorheriges Snippet Nächstes Snippet

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

Absichern tiefer verschachtelter Profildaten-Zugriffe mit Optional Chaining in Vue

Verwandt