Why API integration matters in Vue - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the function needed to fetch data in Vue 3 Composition API.

Vue

<script setup>
import { [1] } from 'vue'
</script>

Drag options to blanks, or click blank then click option'

AuseState

Bref

Ccomponent

Drender

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'useState' which is from React, not Vue.

Trying to import 'component' which is not a function for reactivity.

In Vue 3 Composition API, ref is used to create reactive data, which is essential for API data handling.

2fill in blank

medium

Complete the code to fetch data from an API using fetch inside Vue's onMounted lifecycle hook.

Vue

<script setup>
import { ref, onMounted } from 'vue'
const data = ref(null)
onMounted(() => {
  fetch('[1]')
    .then(res => res.json())
    .then(json => data.value = json)
})
</script>

Drag options to blanks, or click blank then click option'

A'/api/data'

B'http://api/data'

C'https://api.example.com/data'

D'api/data'

Attempts:

3 left

💡 Hint

Common Mistakes

Using relative paths when the API is external.

Missing the protocol (http/https) in the URL.

Using a full URL like 'https://api.example.com/data' is common for API calls to fetch real data.

3fill in blank

hard

Fix the error in the code to correctly update the reactive data after fetching API response.

Vue

<script setup>
import { ref } from 'vue'
const info = ref(null)
fetch('https://api.example.com/info')
  .then(response => response.json())
  .then(data => [1] = data)
</script>

Drag options to blanks, or click blank then click option'

Ainfo.value

Binfo

Cinfo()

Dinfo.data

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning directly to the ref variable instead of its .value.

Trying to call the ref as a function.

In Vue 3, to update a ref's value, you must assign to refVariable.value.

4fill in blank

hard

Fill both blanks to create a reactive variable and fetch data on component mount.

Vue

<script setup>
import { [1], onMounted } from 'vue'
const userData = [2](null)
onMounted(() => {
  fetch('https://api.example.com/user')
    .then(res => res.json())
    .then(json => userData.value = json)
})
</script>

Drag options to blanks, or click blank then click option'

Aref

Breactive

CuseState

Dcomputed

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reactive' for simple null value.

Using 'useState' which is not a Vue function.

Use ref to create a reactive variable holding simple data like null.

5fill in blank

hard

Fill all three blanks to create a reactive variable, fetch API data, and handle errors.

Vue

<script setup>
import { [1], onMounted } from 'vue'
const posts = [2]([])
const error = [3](null)
onMounted(async () => {
  try {
    const res = await fetch('https://api.example.com/posts')
    posts.value = await res.json()
  } catch (e) {
    error.value = e.message
  }
})
</script>

Drag options to blanks, or click blank then click option'

Aref

Breactive

Dcomputed

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reactive' for arrays or error strings.

Using 'computed' which is for derived data.

Use ref to create reactive variables for arrays and error messages.

Practice

1. Why is API integration important in a Vue application?

easy

A. It allows the app to get and show live data from outside sources.

B. It makes the app run faster by avoiding any data fetching.

C. It removes the need for user interaction in the app.

D. It automatically styles the app without CSS.

Solution

1. Step 1: Understand API integration role

   API integration connects the app to external data or services, allowing dynamic content.

2. Step 2: Identify the benefit in Vue apps

   This connection lets the app show live or updated data, improving usefulness.

3. Final Answer:

   It allows the app to get and show live data from outside sources. -> Option A

4. Quick Check:

   API integration = live data connection [OK]

Hint: API integration means connecting to live data sources [OK]

Common Mistakes:

• Thinking API integration speeds up app without data fetching
• Believing it removes user interaction
• Confusing API integration with styling

2. Which Vue code snippet correctly fetches data from an API inside onMounted?

easy

A. onMounted(async () => { const res = await fetch('/api/data'); data.value = await res.json(); })

B. onMounted(() => { fetch('/api/data').then(res => data = res.json()) })

C. onMounted(() => { const res = fetch('/api/data'); data.value = res.json(); })

D. onMounted(async () => { data = fetch('/api/data').json() })

Solution

1. Step 1: Check async fetch usage

   onMounted(async () => { const res = await fetch('/api/data'); data.value = await res.json(); }) uses async/await correctly to wait for fetch and JSON parsing.

2. Step 2: Identify reactive assignment

   It assigns the parsed JSON to data.value, which is correct for Vue refs.

3. Final Answer:

   onMounted(async () => { const res = await fetch('/api/data'); data.value = await res.json(); }) -> Option A

4. Quick Check:

   Async fetch + await json + reactive ref = correct [OK]

Hint: Use async/await and assign to ref.value in Vue [OK]

Common Mistakes:

• Not awaiting fetch or json parsing
• Assigning directly to data without .value
• Using fetch without async/await or then properly

3. Given this Vue code, what will be the value of message after mounting?

const message = ref('');
onMounted(async () => {
  try {
    const res = await fetch('/api/greet');
    const data = await res.json();
    message.value = data.text;
  } catch {
    message.value = 'Error loading';
  }
});

Assuming the API returns { "text": "Hello Vue!" } successfully.

medium

A. "" (empty string)

B. "Error loading"

C. "Hello Vue!"

D. undefined

Solution

1. Step 1: Analyze successful fetch and JSON parse

   The API returns { "text": "Hello Vue!" }, so data.text is "Hello Vue!".

2. Step 2: Assign value to message ref

   Inside try block, message.value is set to "Hello Vue!".

3. Final Answer:

   "Hello Vue!" -> Option C

4. Quick Check:

   API success sets message = "Hello Vue!" [OK]

Hint: Try block sets message on success, catch on failure [OK]

Common Mistakes:

• Assuming catch runs on success
• Forgetting to use .value for ref
• Expecting empty string if fetch succeeds

4. What is wrong with this Vue API call code?

const data = ref(null);
onMounted(() => {
  const res = fetch('/api/items');
  data.value = res.json();
});

medium

A. ref cannot hold null values initially.

B. fetch is asynchronous but not awaited, so data.value gets a Promise.

C. res.json() is not a valid method on fetch response.

D. onMounted cannot be used for API calls.

Solution

1. Step 1: Check fetch usage

   fetch returns a Promise and must be awaited or handled with then().

2. Step 2: Identify assignment error

   Assigning res.json() without awaiting means data.value gets a Promise, not actual data.

3. Final Answer:

   fetch is asynchronous but not awaited, so data.value gets a Promise. -> Option B

4. Quick Check:

   Missing await causes Promise assignment [OK]

Hint: Always await fetch and json() to get real data [OK]

Common Mistakes:

• Not awaiting fetch or json()
• Thinking ref can't start as null
• Believing res.json() is invalid
• Misunderstanding onMounted usage

5. You want to show a loading message while fetching API data in Vue. Which approach correctly handles loading and error states?

hard

A. Use a computed property to fetch data and handle errors inside it.

B. Only fetch data without loading or error states; Vue handles it automatically.

C. Set loading to false before fetch and true after fetch completes.

D. Use refs for loading and error, set loading true before fetch, false after, and catch errors to set error message.

Solution

1. Step 1: Understand loading and error state management

   Loading should be true before fetch starts and false after it ends. Errors should be caught and stored.

2. Step 2: Identify correct Vue pattern

   Using refs for loading and error, updating them properly around async fetch, is the correct approach.

3. Final Answer:

   Use refs for loading and error, set loading true before fetch, false after, and catch errors to set error message. -> Option D

4. Quick Check:

   Manage loading and error states explicitly [OK]

Hint: Set loading true before fetch, false after; catch errors [OK]

Common Mistakes:

• Ignoring loading and error states
• Setting loading false before fetch
• Using computed for async fetch (not recommended)