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.