Fetch API in Vue components - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Vue component display after mounting?

Consider this Vue 3 component using the Fetch API inside onMounted. What will be shown in the template after the component loads?

Vue

<script setup>
import { ref, onMounted } from 'vue'
const data = ref(null)
onMounted(async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
  data.value = await response.json()
})
</script>
<template>
  <div>
    <p v-if="data">Title: {{ data.title }}</p>
    <p v-else>Loading...</p>
  </div>
</template>

A It shows 'Title: delectus aut autem' after fetching the data successfully.

B It shows 'Loading...' indefinitely because fetch is not awaited properly.

C It throws a runtime error because 'data' is not reactive.

D It shows an empty paragraph because 'data.title' is undefined.

💡 Hint

Check how ref and await are used inside onMounted.

The component uses ref to create a reactive variable data. The onMounted hook fetches JSON data and assigns it to data.value. Once data is loaded, the template shows the title from the fetched object.

📝 Syntax

intermediate

Which option correctly fetches data in a Vue 3 component using async setup()?

Choose the correct code snippet that fetches JSON data inside the setup() function using async syntax.

A

async setup() {
  const data = ref(null)
  const response = await fetch('/api/data')
  data.value = await response.json()
  return { data }
}

B

setup() {
  const data = ref(null)
  fetch('/api/data').then(res => data.value = res.json())
  return { data }
}

C

setup() {
  const data = null
  const response = await fetch('/api/data')
  data = await response.json()
  return { data }
}

D

async setup() {
  const data = ref(null)
  fetch('/api/data').then(async res => data = await res.json())
  return { data }
}

💡 Hint

Remember that await can only be used inside async functions.

Option A correctly marks setup as async, uses await to fetch and parse JSON, and returns a reactive data. Other options misuse await or do not handle reactivity properly.

🔧 Debug

advanced

Why does this Vue component fail to update the template after fetching data?

Examine this Vue 3 component code. It fetches data but the template never updates to show the fetched title. What is the cause?

Vue

<script setup>
import { ref, onMounted } from 'vue'
const data = null
onMounted(async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
  data = await response.json()
})
</script>
<template>
  <div>
    <p v-if="data">Title: {{ data.title }}</p>
    <p v-else>Loading...</p>
  </div>
</template>

A The fetch URL is incorrect, so no data is returned.

B The variable 'data' is not reactive because it is initialized as null, not with ref().

C The 'onMounted' hook is not called in <script setup> syntax.

D The template uses 'v-if' incorrectly and should use 'v-show' instead.

💡 Hint

Check how Vue tracks changes to variables for reactivity.

The variable data is a plain variable, not reactive. Vue does not detect changes to it, so the template does not update. Using ref(null) makes it reactive.

❓ state_output

advanced

What is the value of errorMessage after fetch failure in this Vue component?

This Vue 3 component tries to fetch data but the URL is invalid. What will be the value of errorMessage after the fetch attempt?

Vue

<script setup>
import { ref, onMounted } from 'vue'
const data = ref(null)
const errorMessage = ref('')
onMounted(async () => {
  try {
    const response = await fetch('https://invalid.url')
    if (!response.ok) throw new Error('Network response was not ok')
    data.value = await response.json()
  } catch (error) {
    errorMessage.value = error.message
  }
})
</script>
<template>
  <div>
    <p v-if="errorMessage">Error: {{ errorMessage }}</p>
    <p v-else-if="data">Data loaded</p>
    <p v-else>Loading...</p>
  </div>
</template>

A "Network response was not ok"

B "TypeError: Failed to fetch"

C "Failed to fetch"

D "" (empty string)

💡 Hint

Consider what error message the browser throws on network failure.

When the URL is invalid, the fetch API throws a TypeError with message "Failed to fetch". This message is caught and assigned to errorMessage.

🧠 Conceptual

expert

Why should you avoid using fetch directly inside the template in Vue?

Which reason best explains why calling fetch directly inside a Vue template expression is a bad idea?

A Because fetch requires special Vue directives to work inside templates.

B Because fetch is not supported in Vue templates due to security restrictions.

C Because fetch modifies the DOM directly, which conflicts with Vue's virtual DOM.

D Because fetch returns a Promise and templates cannot handle asynchronous operations, causing rendering issues.

💡 Hint

Think about how Vue templates render and handle data.

Vue templates expect synchronous data to render. Fetch returns a Promise, which is asynchronous. Calling fetch in templates would cause errors or unexpected behavior because templates cannot wait for Promises.