Drill 21: Predict the output — Lifecycle and data fetching

<script setup>
import { onMounted, ref } from 'vue'

const lessons = ref([])
const loading = ref(true)
const error = ref('')

onMounted(async () => {
  try {
    const response = await fetch('/api/lessons')
    if (!response.ok) throw new Error('Request failed')
    lessons.value = await response.json()
  } catch (e) {
    error.value = e.message
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <p v-if="loading">Loading…</p>
  <p v-else-if="error">{{ error }}</p>
  <p v-else-if="!lessons.length">No lessons yet.</p>
  <ul v-else><li v-for="lesson in lessons" :key="lesson.id">{{ lesson.title }}</li></ul>
</template>