POST requests for form submission in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the function needed to make HTTP requests in Vue.

Vue

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

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

Aref

BuseFetch

Creactive

Dcomputed

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useFetch which is not a Vue core function

Trying to import axios from 'vue'

We use ref to create reactive variables in Vue, but for HTTP requests, we use fetch or libraries like axios. Here, the import is for ref to hold form data.

2fill in blank

medium

Complete the code to bind the form input to the reactive variable.

Vue

<template>
  <input type="text" v-model=[1] />
</template>

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

A"formData"

B"name"

C"formData.name"

D"inputValue"

Attempts:

3 left

💡 Hint

Common Mistakes

Binding directly to the whole object instead of a property

Using a variable name not declared in the script

The input should bind to a property inside the reactive object, like formData.name, to track the user's input.

3fill in blank

hard

Fix the error in the method to send a POST request using fetch.

Vue

<script setup>
const submitForm = async () => {
  const response = await fetch('/api/submit', {
    method: '[1]',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(formData)
  })
}
</script>

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

AGET

BDELETE

CPUT

DPOST

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET which does not send a request body

Using PUT or DELETE which are for other purposes

To send data to the server, the HTTP method must be POST. Using GET or others won't send the form data properly.

4fill in blank

hard

Fill both blanks to handle the response and convert it to JSON.

Vue

<script setup>
const submitForm = async () => {
  const response = await fetch('/api/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(formData)
  })
  const data = await response.[1]()
  console.log(data[2])
}
</script>

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

Ajson

Btext

Cstatus

Dok

Attempts:

3 left

💡 Hint

Common Mistakes

Using response.text() but not parsing JSON

Logging response.status instead of data

We use response.json() to parse the JSON response. Then we log the parsed data.

5fill in blank

hard

Fill all three blanks to create a reactive form, submit it, and reset the input.

Vue

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

const formData = [2]({ name: '' })

const submitForm = async () => {
  await fetch('/api/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(formData.[3])
  })
  formData.name = ''
}
</script>

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

Aref

Breactive

Cname

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref but treating it like reactive

Accessing formData.name incorrectly

We import reactive to create a reactive object. Then we use reactive({ name: '' }) for formData. When sending, we access formData.value if it was a ref, but since it's reactive, we use formData directly. Here, the blank expects value to show understanding of refs vs reactive.