Vue.js中Axios表单提交后防重复提交、提示与跳转问题

Hey there! Let's tackle your form submission issues one by one—fixing duplicate submissions, getting those success/error messages to show up, and adding post-submission redirects. Here's how to adjust your code:

Step 1: Add State to Prevent Duplicate Submissions & Track Messages #

First, update your component's data to include a submission state flag and a message variable (if you haven't already):

data() {
  return {
    date: '',
    date2: '',
    message: '',
    isSubmitting: false // Blocks duplicate clicks during submission
  }
}

Step 2: Refine the reserve() Method #

Fix the this/self context issue, add duplicate submission protection, and include redirect logic:

reserve() {
  // Stop if we're already submitting
  if (this.isSubmitting) return;
  this.isSubmitting = true;

  axios.post('../api/reserve', {
    property_id: 1,
    reserve_start: this.date,
    reserve_end: this.date2,
  })
  .then(response => {
    this.message = 'Data is entered successfully!';
    // Redirect after a short delay so users see the success message
    setTimeout(() => {
      window.location.href = '/your-success-page'; // Replace with your target URL
    }, 1500);
  })
  .catch(error => {
    this.message = 'Error submitting data. Please try again.';
    console.error('Submission error:', error); // For debugging
  })
  .finally(() => {
    // Reset submission state regardless of success/error
    this.isSubmitting = false;
  });
}

Step 3: Update Your HTML to Display Messages & Disable the Button #

Add a message display area and bind the submit button's disabled state to your isSubmitting flag:

<form @submit.prevent="reserve()" id="myForm" class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed">
  <!-- Your existing form fields go here -->

  <!-- Success/Error Message -->
  <div v-if="message" 
       :class="message.includes('Error') ? 'alert alert-danger' : 'alert alert-success'">
    {{ message }}
  </div>

  <!-- Submit Button with Loading State -->
  <button type="submit" 
          :disabled="isSubmitting"
          class="submit-btn">
    {{ isSubmitting ? 'Submitting...' : 'Submit' }}
  </button>
</form>

Key Fixes Explained: #

• Duplicate Submissions: The isSubmitting flag blocks multiple clicks while the request is in flight, and the finally block resets it once the request completes.
• Message Display: The <div v-if="message"> element will only render when there's a message to show, and uses conditional classes to style success/error messages differently.
• this Context: By ditching the undefined self variable and using this directly (since we're not redefining this inside traditional functions), the message updates correctly in your Vue instance.
• Redirect: The setTimeout gives users a brief moment to see the success message before redirecting—you can adjust the delay or remove it entirely if you prefer an immediate redirect.

内容的提问来源于stack exchange，提问作者Farshad