CODEWITHSUNDEEP
vue.js
yassine j
yassine j

Reputation: 515

I can't Integrat Sweet Alert After Axios Post action vueJs

i want to integrate this toast only if axios post is executed. i placed it like that and it's shown up even if my post axios function is not working.

how can i fix that ?

My code:

   methods: {
     addRinvoice: function () {
       const toast = swal.mixin({
      toast: true,
      position: 'top-end',
      showConfirmButton: false,
      timer: 9000
      });

      axios.post('/addrinvoice', this.rinvoice)
            .then(response => {



      toast({
      type: 'success',
      title: 'Invoice added in Database'
       }),


            console.log(response.data);
             if (response.data.etat) {
             this.rinvoice = {
             id: 0,
             amount: response.data.etat.amount,
             };}})

            .catch(error => {
                console.log('errors: ', error)
             }) },

Upvotes: 1

Views: 1709

Answers (2)

Bryan Miller
Bryan Miller

Reputation: 3323

Just put your call invoking the toast method inside your then() method:

  methods: {
     addRinvoice: function () {

       axios.post('/addrinvoice', this.rinvoice)
        .then(response => {
           const toast = swal.mixin({
             toast: true,
             position: 'top-end',
             showConfirmButton: false,
             timer: 9000
            });

         toast({
             type: 'success',
             title: 'Invoice added in Database'
         }),
         console.log(response.data);
         if (response.data.etat) {
           this.rinvoice = {
           id: 0,
           amount: response.data.etat.amount,
          };}})

        .catch(error => {
            console.log('errors: ', error)
         }) 

       },

Upvotes: 1

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

place it inside then after getting response successfully like :

then(response=>{
     ...
     const toast = swal.mixin({
        toast: true,
        position: 'top-end',
       showConfirmButton: false,
       timer: 9000
       });

       toast({
           type: 'success',
           title: 'Invoice added in Database'
        }
       }

Upvotes: 0

Related Questions