POST requests for form submission in Vue - Performance & Optimization

Performance: POST requests for form submission

MEDIUM IMPACT

This affects page load speed and interaction responsiveness when submitting forms.

Submitting a form with a POST request in Vue

Vue

methods: { async submitForm() { try { this.isLoading = true; const response = await fetch('/api/submit', { method: 'POST', body: JSON.stringify(this.formData), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); this.isLoading = false; this.successMessage = 'Submitted successfully!'; } catch { this.isLoading = false; this.errorMessage = 'Submission failed.'; } } }

Uses async/await to keep UI responsive, shows non-blocking feedback, and manages loading state.

📈 Performance GainNo UI blocking, faster interaction response, better INP score.

Submitting a form with a POST request in Vue

Vue

methods: { submitForm() { fetch('/api/submit', { method: 'POST', body: JSON.stringify(this.formData), headers: { 'Content-Type': 'application/json' } }).then(response => response.json()).then(data => { alert('Submitted!'); }).catch(() => { alert('Error'); }); } }

Uses alert dialogs which block rendering and user input.

📉 Performance CostBlocks rendering and user input until alert is dismissed, increasing INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Async fetch with alert	Minimal DOM changes	0 reflows but blocks input	Blocks paint during alert	[X] Bad
Async fetch with reactive state	Updates loading and message nodes	1 reflow for message update	Paint cost low and non-blocking	[OK] Good

Rendering Pipeline

When a POST request is triggered, the browser sends data to the server asynchronously. The UI updates depend on JavaScript handling the response without blocking rendering or layout.

→JavaScript Execution

→Paint

→Composite

⚠️ BottleneckJavaScript Execution if synchronous or blocking UI feedback is used.

Core Web Vital Affected

INP

This affects page load speed and interaction responsiveness when submitting forms.

Optimization Tips

1Always use asynchronous POST requests to avoid blocking the UI.

2Show non-blocking loading indicators instead of alert dialogs.

3Manage reactive state to update the UI smoothly after submission.

Performance Quiz - 3 Questions

What is the main performance problem with using alert() after a POST request in Vue?

A It blocks rendering and user input until dismissed

B It increases bundle size significantly

C It causes multiple reflows on the page

D It delays the network request

DevTools: Performance

How to check: Record while submitting the form and observe the Main thread activity and responsiveness during the POST request.

What to look for: Look for long tasks blocking input or UI updates; good patterns show short tasks and smooth interaction.

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