POST requests for form submission in Vue - Step-by-Step Execution

Concept Flow - POST requests for form submission

User fills form

↓

User clicks submit

↓

Form data collected

↓

POST request sent

↓

Server processes data

↓

Response received

↓

Update UI based on response

This flow shows how a user fills a form, submits it, the app sends a POST request, and updates the UI based on the server response.

Execution Sample

Vue

const submitForm = async () => {
  const response = await fetch('/api/submit', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(formData)
  });
  const result = await response.json();
  message.value = result.message;
};

This code sends formData as JSON in a POST request and updates a message with the server's reply.

Execution Table

Step	Action	Data Sent	Server Response	UI Update
1	User fills form	N/A	N/A	Form fields updated
2	User clicks submit	N/A	N/A	Submit button triggers submitForm
3	POST request sent	{"name":"Alice","email":"[e-mail]"}	N/A	Waiting for response
4	Server processes data	Received JSON	{"message":"Success!"}	N/A
5	Response received	N/A	{"message":"Success!"}	message.value set to 'Success!'
6	UI updates	N/A	N/A	Message displayed to user
7	End	N/A	N/A	Form submission complete

💡 Process ends after UI updates with server response message.

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
formData	{}	{"name":"Alice","email":"[e-mail]"}	{"name":"Alice","email":"[e-mail]"}	{"name":"Alice","email":"[e-mail]"}
response	null	Response object with JSON	Response object with JSON	Response object with JSON
result	null	null	{"message":"Success!"}	{"message":"Success!"}
message.value	""	""	"Success!"	"Success!"

Key Moments - 3 Insights

Why do we use JSON.stringify on formData before sending?

Because the POST request body must be a string, not an object. JSON.stringify converts the formData object into a JSON string, as shown in execution_table step 3.

What happens if we forget to set 'Content-Type' header to 'application/json'?

The server might not understand the data format. The header tells the server the data is JSON. This is important in step 3 of the execution_table.

Why do we await response.json() after sending the POST request?

Because response.json() returns a promise that resolves to the parsed JSON data from the server. We need this data to update the UI, as in step 5.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of message.value after step 5?

A ""

B "Success!"

C null

D undefined

💡 Hint

Check the 'UI Update' column at step 5 in execution_table.

At which step does the POST request actually send the form data?

A Step 4

B Step 2

C Step 3

D Step 5

💡 Hint

Look at the 'Action' and 'Data Sent' columns in execution_table.

If we remove JSON.stringify from the body, what will happen in the execution?

A The server receives an object and may reject it

B The UI updates immediately without waiting

C The server receives a string as expected

D The POST request will not be sent

💡 Hint

Refer to key_moments about why JSON.stringify is needed and step 3 in execution_table.

Concept Snapshot

POST requests send data to a server.
Use fetch with method 'POST' and headers 'Content-Type: application/json'.
Convert form data to JSON string with JSON.stringify.
Await server response and parse JSON with response.json().
Update UI based on server reply.

Full Transcript

This visual trace shows how a Vue app handles form submission using a POST request. The user fills the form, clicks submit, and the app collects the data. It sends the data as a JSON string in a POST request with proper headers. The server processes the data and sends back a JSON response. The app waits for this response, parses it, and updates the UI message to show success or error. Key points include converting data to JSON string before sending, setting the correct content-type header, and awaiting the JSON response to update the UI. The execution table tracks each step from user input to UI update, and the variable tracker shows how formData, response, result, and message.value change during the process.

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