POST requests for form submission in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when this Vue component submits the form?

Consider this Vue 3 component using the Composition API. What will be the console output after submitting the form?

Vue

<template>
  <form @submit.prevent="submitForm">
    <input v-model="username" placeholder="Username" />
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { ref } from 'vue'

const username = ref('')

async function submitForm() {
  const response = await fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username: username.value })
  })
  const data = await response.json()
  console.log(data.message)
}
</script>

A Logs undefined because username is not reactive

B Throws a syntax error because fetch is used incorrectly

C Logs the server response message if the POST is successful

D Prevents form submission but does not send any request

💡 Hint

Look at how username is used and how fetch is called with await.

The component uses ref to make username reactive. The submitForm function sends a POST request with JSON body and logs the server's response message.

📝 Syntax

intermediate

Which option correctly sends a POST request with JSON body in Vue?

Choose the code snippet that correctly sends a POST request with JSON data inside a Vue method.

A fetch('/api/data', { method: 'POST', body: JSON.stringify({ name: 'Alice' }) })

B fetch('/api/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'Alice' }) })

C fetch('/api/data', { method: 'POST', headers: { 'Content-Type': 'text/plain' }, body: { name: 'Alice' } })

D fetch('/api/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: { name: 'Alice' } })

💡 Hint

Remember to set the correct Content-Type header and stringify the body.

Option B correctly sets the header to application/json and stringifies the body. Options C and D send the body as an object, which is invalid. Option B misses the header.

🔧 Debug

advanced

Why does this Vue POST request fail with a CORS error?

This Vue component sends a POST request to an external API but gets a CORS error in the browser. What is the most likely cause?

Vue

<script setup>
import { ref } from 'vue'
const data = ref('')
async function sendData() {
  const res = await fetch('https://external.api/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ data: data.value })
  })
  console.log(await res.json())
}
</script>

A The external API does not allow cross-origin POST requests from this domain

B The fetch call is missing the 'mode' option set to 'cors'

C Vue's reactivity system blocks cross-origin requests

D The JSON body is not stringified properly

💡 Hint

Think about browser security rules for cross-origin requests.

CORS errors happen when the server does not permit requests from your site. The client code is correct; the server must allow the origin.

❓ state_output

advanced

What is the value of 'status' after submitting this form?

In this Vue component, what will be the value of status after the form is submitted and the server responds with { success: true }?

Vue

<template>
  <form @submit.prevent="submit">
    <input v-model="input" />
    <button type="submit">Send</button>
  </form>
  <p>{{ status }}</p>
</template>

<script setup>
import { ref } from 'vue'
const input = ref('')
const status = ref('idle')

async function submit() {
  status.value = 'sending'
  const res = await fetch('/api/send', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ input: input.value })
  })
  const data = await res.json()
  if (data.success) {
    status.value = 'success'
  } else {
    status.value = 'error'
  }
}
</script>

A 'idle'

B 'sending'

C 'error'

D 'success'

💡 Hint

Look at how status changes after the fetch call.

The code sets status to 'sending' before the request, then updates it to 'success' if the server responds with { success: true }.

🧠 Conceptual

expert

Why use async/await with POST requests in Vue form submission?

Which is the best explanation for using async/await when sending POST requests in Vue form submission?

A It allows writing asynchronous code in a readable way and waits for the server response before proceeding

B It automatically retries the POST request if it fails

C It blocks the UI thread until the request finishes, preventing user interaction

D It converts the POST request into a synchronous call to improve performance

💡 Hint

Think about how async/await affects code flow and readability.

Async/await lets you write asynchronous code that looks like normal sequential code. It waits for the fetch to complete before moving on, improving clarity.

Practice

1. In Vue, which directive is used to prevent the default form submission and handle it with a method instead?

easy

A. @input.prevent

B. @click.prevent

C. v-model.prevent

D. @submit.prevent

Solution

1. Step 1: Understand Vue event modifiers

   Vue provides event modifiers like .prevent to stop default browser actions.

2. Step 2: Identify the correct event for form submission

   The form submission event is submit, so @submit.prevent stops the default submit and allows custom handling.

3. Final Answer:

   @submit.prevent -> Option D

4. Quick Check:

   Use @submit.prevent to control form submit [OK]

Hint: Use @submit.prevent to stop default form submit [OK]

Common Mistakes:

• Using @click.prevent on form instead of @submit.prevent
• Trying to use v-model.prevent which doesn't exist
• Using @input.prevent which is for input events

2. Which of the following is the correct way to send a POST request with form data using Vue's fetch API inside a method?

easy

A. fetch('/api', { method: 'POST', body: JSON.stringify(data) })

B. fetch('/api', { method: 'GET', body: JSON.stringify(data) })

C. fetch('/api', { method: 'POST', data: data })

D. fetch('/api', { method: 'POST', body: data })

Solution

1. Step 1: Identify the correct HTTP method for sending data

   POST is used to send data to the server, so method must be 'POST'.

2. Step 2: Use the correct property for sending JSON data

   fetch expects the data in the body property as a string, so use JSON.stringify(data).

3. Final Answer:

   fetch('/api', { method: 'POST', body: JSON.stringify(data) }) -> Option A

4. Quick Check:

   POST with JSON.stringify in body = fetch('/api', { method: 'POST', body: JSON.stringify(data) }) [OK]

Hint: Use method POST and JSON.stringify(data) in body [OK]

Common Mistakes:

• Using method GET when sending data
• Passing data directly without JSON.stringify
• Using 'data' property instead of 'body'

3. Given this Vue method for form submission, what will be logged if the server responds with status 200?

async submitForm() {
  const response = await fetch('/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(this.formData)
  });
  if (response.ok) {
    console.log('Success');
  } else {
    console.log('Failed');
  }
}

medium

A. Failed

B. Success

C. SyntaxError

D. No output

Solution

1. Step 1: Understand fetch response status

   When the server responds with status 200, response.ok is true.

2. Step 2: Check the conditional logging

   If response.ok is true, it logs 'Success'. Otherwise, it logs 'Failed'.

3. Final Answer:

   Success -> Option B

4. Quick Check:

   response.ok true means 'Success' logged [OK]

Hint: response.ok true means success message logs [OK]

Common Mistakes:

• Confusing response.ok with response.status
• Expecting 'Failed' on status 200
• Missing await causing no output

4. What is wrong with this Vue method for submitting a form?

submit() {
  fetch('/api', {
    method: 'POST',
    body: this.formData
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));
}

medium

A. Missing JSON.stringify for body data

B. Missing method property in fetch options

C. Using async/await incorrectly

D. No catch block for errors

Solution

1. Step 1: Check how formData is sent in fetch

   fetch expects the body to be a string for JSON data, so this.formData must be stringified.

2. Step 2: Identify missing JSON.stringify

   Without JSON.stringify(this.formData), the server may not receive data correctly.

3. Final Answer:

   Missing JSON.stringify for body data -> Option A

4. Quick Check:

   Body must be JSON string, not raw object [OK]

Hint: Always stringify JSON data before sending in fetch body [OK]

Common Mistakes:

• Sending raw object instead of JSON string
• Forgetting method: 'POST' (not the case here)
• Not handling errors with catch

5. You want to submit a form in Vue and show a success message only if the POST request returns JSON with { success: true }. Which code snippet correctly implements this?

hard

A. async submit() {
const res = await fetch('/submit', { method: 'POST', body: JSON.stringify(this.form) });
const data = await res.json();
if (data.success) alert('Submitted!');
}

B. async submit() {
const res = await fetch('/submit', { method: 'POST', body: this.form });
const data = await res.json();
if (data.success) alert('Submitted!');
}

C. submit() {
fetch('/submit', { method: 'POST', body: JSON.stringify(this.form) })
.then(res => res.json())
.then(data => { if (data.success) alert('Submitted!'); });
}

D. submit() {
fetch('/submit', { method: 'POST', body: this.form })
.then(res => res.json())
.then(data => { if (data.success) alert('Submitted!'); });
}

Solution

1. Step 1: Check correct JSON stringification

   Options A and C stringify the form data correctly; B and D do not.

2. Step 2: Identify correct async handling

   submit() {
     fetch('/submit', { method: 'POST', body: JSON.stringify(this.form) })
       .then(res => res.json())
       .then(data => { if (data.success) alert('Submitted!'); });
   }

   uses promise chaining correctly without async/await, which is valid.

   async submit() {
     const res = await fetch('/submit', { method: 'POST', body: JSON.stringify(this.form) });
     const data = await res.json();
     if (data.success) alert('Submitted!');
   }

   uses async/await but misses headers for JSON content.

3. Step 3: Consider headers for JSON content

   submit() {
     fetch('/submit', { method: 'POST', body: JSON.stringify(this.form) })
       .then(res => res.json())
       .then(data => { if (data.success) alert('Submitted!'); });
   }

   is the best because it correctly stringifies and processes JSON response; headers are optional but recommended.

4. Final Answer:

   Option C correctly submits and checks JSON success -> Option C

5. Quick Check:

   Stringify data and check JSON success in then() [OK]

Hint: Stringify form data and check JSON success in then() [OK]

Common Mistakes:

• Not stringifying form data before sending
• Missing headers for JSON content-type
• Mixing async/await and then() incorrectly