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.

Practice

1. What is the main purpose of using the Fetch API inside a Vue component?

easy

A. To handle user input events like clicks

B. To style the component with CSS

C. To get data from the internet and use it in the component

D. To create new Vue components dynamically

Solution

1. Step 1: Understand Fetch API role

   The Fetch API is used to request data from a server or internet resource.

2. Step 2: Connect Fetch API to Vue component

   Inside Vue components, fetch is used to load data that the component will display or use.

3. Final Answer:

   To get data from the internet and use it in the component -> Option C

4. Quick Check:

   Fetch API = get data [OK]

Hint: Fetch API fetches data from internet for Vue components [OK]

Common Mistakes:

• Thinking Fetch API styles components
• Confusing fetch with event handling
• Using fetch to create components

2. Which is the correct way to use fetch inside a Vue 3 <script setup> component to load data on mount?

easy

A. Call fetch inside the onMounted() lifecycle hook

B. Call fetch inside a computed property

C. Use fetch directly in the template section

D. Use fetch inside a watchEffect without dependencies

Solution

1. Step 1: Identify lifecycle hook for data loading

   onMounted() runs code after the component appears, perfect for fetching data.

2. Step 2: Match fetch usage to lifecycle hook

   Calling fetch inside onMounted() ensures data loads once component is ready.

3. Final Answer:

   Call fetch inside the onMounted() lifecycle hook -> Option A

4. Quick Check:

   Fetch in onMounted = correct usage [OK]

Hint: Use onMounted() to fetch data after component loads [OK]

Common Mistakes:

• Trying to fetch data in template (not allowed)
• Using computed for async fetch (wrong usage)
• Using watchEffect without dependencies causing repeated fetch

3. What will be the output in the console when this Vue 3 <script setup> code runs?

import { ref, onMounted } from 'vue';
const data = ref(null);
const error = ref(null);
onMounted(async () => {
  try {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    data.value = await res.json();
    console.log(data.value.title);
  } catch (e) {
    error.value = 'Failed to load';
    console.log(error.value);
  }
});

medium

A. Logs undefined because data.value is never set

B. Logs 'Failed to load' always

C. Throws a syntax error because async is not allowed

D. Logs the title of the post with id 1 from the API

Solution

1. Step 1: Analyze fetch and await usage

   The code fetches a post from the API and waits for the JSON response.

2. Step 2: Check console.log output

   It logs the title property of the fetched post, so it prints the post's title.

3. Final Answer:

   Logs the title of the post with id 1 from the API -> Option D

4. Quick Check:

   Fetch success logs title [OK]

Hint: Await fetch then log data property for output [OK]

Common Mistakes:

• Assuming fetch always fails
• Thinking async is not allowed in onMounted
• Expecting undefined because of missing await

4. Identify the error in this Vue 3 <script setup> snippet that fetches data:

import { ref, onMounted } from 'vue';
const data = ref(null);
const error = ref(null);
onMounted(() => {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(json => data = json)
    .catch(() => error.value = 'Error fetching');
});

medium

A. Assigning json directly to data instead of data.value

B. Missing await keyword before fetch

C. Using onMounted instead of created lifecycle hook

D. Not returning the fetch promise

Solution

1. Step 1: Check how ref is updated

   Refs in Vue must be updated by setting their .value property, not the ref variable itself.

2. Step 2: Identify incorrect assignment

   The code assigns json directly to data, which breaks reactivity; it should be data.value = json.

3. Final Answer:

   Assigning json directly to data instead of data.value -> Option A

4. Quick Check:

   Update ref with .value [OK]

Hint: Update ref variables with .value, not direct assignment [OK]

Common Mistakes:

• Forgetting .value when setting ref
• Confusing async/await with then chaining
• Thinking onMounted is wrong lifecycle hook here

5. You want to fetch user data and show a loading message while waiting. Which Vue 3 <script setup> code correctly implements fetch with loading and error states?

hard

A. const loading = false;
const error = null;
const user = null;
onMounted(() => {
fetch('/user')
.then(res => res.json())
.then(data => user = data)
.catch(() => error = 'Failed');
loading = false;
});

B. const loading = ref(false);
const error = ref(null);
const user = ref(null);
onMounted(async () => {
loading.value = true;
try {
const res = await fetch('/user');
user.value = await res.json();
} catch {
error.value = 'Failed to load user';
} finally {
loading.value = false;
}
});

C. const loading = ref(true);
const error = ref('');
const user = ref({});
fetch('/user').then(res => res.json()).then(data => {
user.value = data;
loading.value = false;
}).catch(() => {
error.value = 'Error';
loading.value = false;
});

D. const loading = ref(false);
const error = ref(null);
const user = ref(null);
async function loadUser() {
loading.value = true;
const res = await fetch('/user');
user.value = await res.json();
loading.value = false;
}
onMounted(loadUser);

Solution

1. Step 1: Check reactive state setup

   const loading = ref(false); const error = ref(null); const user = ref(null); onMounted(async () => { loading.value = true; try { const res = await fetch('/user'); user.value = await res.json(); } catch { error.value = 'Failed to load user'; } finally { loading.value = false; } }); uses ref() for loading, error, and user, enabling reactivity and UI updates.

2. Step 2: Verify fetch with loading and error handling

   It sets loading true before fetch, uses try/catch for errors, and sets loading false in finally block.

3. Final Answer:

   Uses refs with onMounted, try/catch/finally for loading and error states -> Option B

4. Quick Check:

   Loading true before fetch, false after [OK]

Hint: Use ref and try/catch with finally to manage loading state [OK]

Common Mistakes:

• Not using ref for reactive state
• Setting loading false too early
• Missing error handling in async fetch