[Vuejs]-How to prevent a slow post form UX breaking required attribute?

by

1👍

Using Vuejs you can try :

  1. @submit.prevent="action" in form tag instead of onClick....
  2. add async await with try catch
  3. if you want you can also disable your button in submit to be sure users can’t send an empty payloads

here’s a gist code : https://gist.github.com/jiyuuki/e6f8f7bb67b48014223d1561119ac2fa

-1👍

Try to control the button with a data property like below.

export default {
  name: 'Form',
  data() {
    return {
      isLoading: false,
    }
  },
  methods: {
    async submitForm() {
      this.isLoading = true;
      await this.form.submit(); // Assuming this is where you make the time taking call
      this.disabled=true;
      this.value='Sending…';
    }
  }
  
}
<form method="POST">
  <label>Your name:
<input name="name" required>
</label>
  <input  
  :disabled="isLoading"
  type="button" 
  @click="submitFrom">
</form>

Reset the isLoading to false after the response reaches.

Leave a comment