[Vuejs]-How to show custom error message when register fails ? (Express, Vue, Axios)

by

0👍

✅

If you are using async/await. You should use try catch to handle the error return from your API.

methods: {
      async createExperimentation(){
        try {
          const response = await ExperimentationService.insertExperimentation(this.firstname, this.lastname, this.email, this.phone, this.address, this.city, this.zip);
          this.successMessage = response.data;
          this.experimentations = await ExperimentationService.getExperimentations();
        } catch (e) {
          this.errorMessage = e;
        }
      },

 <v-card ref="form">
      <v-alert type="success">
        {{ successMessage }}
    </v-alert>
    <v-alert type="error">
        {{ errorMessage }}
    </v-alert>

I am not sure what does insertExperimentation and getExperimentations do. I tried my best.

0👍

You can use sweet alert to show pop up messages for success and failure. It’s simple to use in Vue.

you have to use the Vue wrapper of the sweet alert and follow the instructions here.

After npm install do following —

  • Import the module in main.js import swal from './assets/plugins/sweetAlert2'
  • Let Vue know about the swal pluging by calling Vue.use(swal) in main.js.
  • Import the plugin in component you want to use import Swal from 'sweetalert2'
  • Call the swal with error or success message respectively Swal('', '', 'error') or Swal('', response.data.message, 'success') as required.
  • No html changes are required, you can remove the v-alert from you html.

Leave a comment