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

[xereda]

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

[rstoenescu]

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

[xereda]

@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 !?

[rstoenescu]

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.

[Underzzoo]

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.

[rstoenescu]

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

[Chmood]

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;).