Logic Promisses or callback with Sweetalert and Vuejs

Asked

Viewed 136 times

1

I’m trying to make a callback to perform some functions, I don’t know if I should use Promisses, callbacks or something more advanced. This problem is more about logic

I own a Mixin that triggers the Alert

sweetalertMixin

Vue.mixin({
    methods: {
        sweetAlert(mensagem){
            this.$swal({
                title: 'Você tem certeza?',
                text: mensagem,
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Confirmar',
                cancelButtonText: 'Cancelar'
            }).then(function(confirmado) {
                return true
            }, function(cancelado) {
                return false
            })

        }
    }
})

crud.js

Vue.mixin({
    methods: {

DeletarTudo(url){
    // Executa isso primeiro para minha variável receber valor
    let sweetAlertBoolean = this.sweetAlert("Deletar Tudo?") 

    // Depois executa esse IF   
    if(sweetAlertBoolean){
        // Faça algo
    } else{
        // Faça algo
    }
}

RecuperarTudo(url){
    // Executa isso primeiro para minha variável receber valor
    let sweetAlertBoolean = this.sweetAlert("Recuperar Tudo?") 

    // Depois executa esse IF   
    if(sweetAlertBoolean){
        // Faça algo
    } else{
        // Faça algo
    }
}
}

And in my file .see on the scripts part I have my methods

methods: {
    botaoRecuperar: function() {
        this.RecuperarTudo("/Recuperar")
    },
    botaoExcluir: function() {
        this.DeletarTudo("/Deletar")
    }
}

These true/false Return that I assign to mine sweetAlertBoolean do nothing.
How do I get my variable sweetAlertBoolean be assigned before executing the if beneath it?

Thank you!

1 answer

3


Instead of thinking about if/else asynchronous thinks that the then receives a function if and another else.

In other words, this logic is in the code of mixin And what you should do is call other methods within those functions that do what you want. In your case you only need to use the affirmative case, then you can simplify to:

}).then(() => this.funcaoApagar());
  • I tried to leave the question with less code possible, ended up not working... This my mixin sweetAlert I’ll use it in several places, I could copy and paste the same code into my methods Deletartudo and Recuperartudo and then use the plugin’s native callbacks Sweetalert, but I’m separating into a mixin to have less code

  • If you want more control over what happens you can pass those methods the moment you call sweetAlert thus sweetAlert(mensagem, function(){/* caso A */}, function(){/* caso B */}){ and then you hand that over to the President.

  • @Jackson makes sense?

  • Yes, Sergio does, but it turns out to be a very complicated code to analyze.. Isn’t there any other way to solve this case? I could for example put one setTimeout checking `if(sweetAlertBoolean==Undefined) { // do nothing } Else { //executes my code there from question } ... But this is very ugly

  • @Jackson is ugly and it’s impossible to know how long it takes the user to click OK :) Why do you say it gets complicated to analyze? What you can do is give return within this method. Stay return this.$swal({ and so you get the Promise in place of the if/else. This is perhaps the cleanest way.

  • 1

    Perfect Sergio, I will apply this your solution! Thank you ;) !

Show 1 more comment

Browser other questions tagged

You are not signed in. Login or sign up in order to post.