GET requests in components in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the function used to make HTTP GET requests in Vue components.

Vue

<script setup>
import axios from '[1]'
</script>

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

Avue

Bvue-router

Cpinia

Daxios

Attempts:

3 left

💡 Hint

Common Mistakes

Importing from 'vue' instead of 'axios'.

Using 'vue-router' which is for routing, not HTTP requests.

Axios is a popular library to make HTTP requests, including GET requests, in Vue components.

2fill in blank

medium

Complete the code to define a reactive variable to store data fetched from a GET request.

Vue

<script setup>
import { ref } from 'vue'
const data = [1]([])
</script>

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

Areactive

Bcomputed

Cref

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive([]) which creates a reactive object, but ref([]) is simpler for arrays.

Using computed which is for derived values.

The ref function creates a reactive variable that can hold any value, including arrays.

3fill in blank

hard

Fix the error in the code to correctly fetch data with axios inside the onMounted lifecycle hook.

Vue

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
const users = ref([])
onMounted(async () => {
  const response = await axios.[1]('https://api.example.com/users')
  users.value = response.data
})
</script>

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

Aget

Brequest

Cfetch

Dpost

Attempts:

3 left

💡 Hint

Common Mistakes

Using axios.post which sends data instead of fetching.

Using axios.fetch which does not exist.

The axios.get method is used to make GET requests to fetch data.

4fill in blank

hard

Fill both blanks to create a GET request inside the onMounted hook and assign the result to a reactive variable.

Vue

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
const posts = ref([])
onMounted(async () => {
  const response = await axios.[1]('https://api.example.com/posts')
  posts.[2] = response.data
})
</script>

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

Aget

Bpost

Cvalue

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using axios.post instead of get.

Assigning directly to posts instead of posts.value.

Use axios.get to fetch data and assign it to the reactive variable's value property.

5fill in blank

hard

Fill all three blanks to fetch data with axios, handle errors, and update reactive variables accordingly.

Vue

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
const items = ref([])
const error = ref(null)
onMounted(async () => {
  try {
    const response = await axios.[1]('https://api.example.com/items')
    items.[2] = response.[3]
  } catch (err) {
    error.value = err.message
  }
})
</script>

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

Aget

Bvalue

Cdata

Dpost

Attempts:

3 left

💡 Hint

Common Mistakes

Using axios.post instead of get.

Assigning response directly instead of response.data.

Updating items instead of items.value.

Use axios.get to fetch data, assign response.data to items.value, and catch errors to update error.value.