Pass method ( "this" -> VueJS) to the handler of a "Confirm Dialog".



  • Pass method ( “this” -> VueJS) to the handler of a “Confirm Dialog”.

    How can I send a local method to be executed after a successful action in the “confirm dialog”?

    http://quasar-framework.org/components/dialog.html


  • Admin

    What is your use case? This is a matter of JS closures (and some ES6 syntax to ease the pain).



  • @rstoenescu I just did not want to leave it fixed inside Dialog (). I’ll need to call Toast (Quasar component), but I did not want to make this call explicit and fixed inside Dialog (). I do not think it’s elegant and I’m afraid it might bring me problems for new needs.

    As you have more experience, what do you think about it !?


  • Admin

    Make a wrapper to call Dialog() with the parameters that you want. It’s hard to know what exactly you are trying to do without some code to look at.



  • I’m having a trouble like that.
    I’m using data table for create a users list, and for sure, modificate the data in database.

    I’m implementing the delete function and the code is like that:

    deleteRow (selection) {
          if (selection) {
            Dialog.create({
              title: 'Confirmar Exclusão?',
              message: 'Os dados excluídos não poderão ser recuperados.',
              buttons: [
                'Cancelar',
                {
                  label: 'Excluir',
                  handler () {
                    this.$http.delete(this.$store.state.apiRoutes.users + '/' + selection.rows[0].data._id).then((response) => {
                      if (response.data.ok) {
                        console.log('Usuário excluído!')
                        this.$store.commit('getUserlist')
                      }
                      else {
                        console.log('Deu merda')
                      }
                    })
                  }
                }
              ]
            })
          }
        }
    

    So, when i confirm the Dialog, he must execute the HANDLER function, and i get this error:

    Uncaught TypeError: Cannot read property '$http' of undefined
        at handler (eval at 174 (0.c9164df….hot-update.js:7), <anonymous>:87:19)
        at eval (eval at <anonymous> (app.js:789), <anonymous>:682:11)
        at VueComponent.eval [as __onClose] (eval at <anonymous> (app.js:789), <anonymous>:716:11)
        at eval (eval at <anonymous> (app.js:789), <anonymous>:5237:19)
    

    To resolve my problem i make a simple step:

    deleteRow (selection) {
          if (selection) {
            var vm = this
            Dialog.create({
              title: 'Confirmar Exclusão?',
              message: 'Os dados excluídos não poderão ser recuperados.',
              buttons: [
                'Cancelar',
                {
                  label: 'Excluir',
                  handler () {
                    vm.$http.delete(vm.$store.state.apiRoutes.users + '/' + selection.rows[0].data._id).then((response) => {
                      if (response.data.ok) {
                        console.log('Usuário excluído!')
                        vm.$store.commit('getUserlist')
                      }
                      else {
                        console.log('Deu merda')
                      }
                    })
                  }
                }
              ]
            })
          }
        }
    

    I’m sorry for my english, i’m brazilian.
    Thanks.


  • Admin

    You can also take advantage of ES6 and use an arrow function as handler (handler: () => { this.$http.... })



  • This page helped me a lot!

    I can confirm that for problems about accessing this inside a dialog handler (or any other callback function in general I guess), the only fix needed is to switch the syntax from:

    handler () {
      // this is undefined here
    }
    

    to:

    handler: () => {
      // this is available
    }
    

    This is a reminder that ES6 arrow functions not only are syntaxic sugar, but also affect the way this is bound (in order to eradicate the good old var that = this;).


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.