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')
orSwal('', response.data.message, 'success')
as required. - No html changes are required, you can remove the
v-alert
from you html.
Source:stackexchange.com