[Solved] how to use $emit inside axios response (then)?

[rconstantine]

Hey guys,

It took me a while to realize that although this.$emit is working elsewhere in my module, the ones inside of this aren’t:

this.$axios.get(path, { timeout: 600000 }).then(res => {
        console.log('res', res)
        pdfPath = res.data
        console.log('got pdfPath', pdfPath)
        this.$emit('path-set', pdfPath)
        console.log('here mode', here.mode)
        if (here.mode === 'pdf') {
          console.log('emitting')
          this.$emit('pdf-only', true)
        }
      })

Note: this.mode === 'pdf' wasn’t even working, so before the axios call, I let here = this which is why you see here.mode instead.
Also note: using here in place of this didn’t work for the $emit calls.
Lastly: all of the console.logs are working from the section pasted above, but the ones I have in parent module which correspond to the problem $emits aren’t firing. I have others, called from $emits outside of the above code which are working.

Anyone know how to $emit from inside that then section? This is in the script section of a Vue file.

[metalsadman]

probably call a method passing your params in your methods that will call your $emit.
ie.

..axios..then(...
  this.emitMethod(pdfPath)
..
methods: {
  emitMethod(params) {
    this.$emit('your-event', params)
  }
...

You could just return the data from your res and do your checking outside of then, use async.

async api(){
  const data = await ..axios...then(res => res.data)
    If(...)
      this.$emit..

Prolly provide more info, like where are you calling that, is it inside a method a hook a router guard etc…

[rconstantine]

This didn’t work:

this.$axios.get(path, { timeout: 600000 }).then(res => {
        console.log('res', res)
        pdfPath = res.data
        console.log('got pdfPath', pdfPath)
        this.innerEmit('path-set', pdfPath)
        console.log('here mode', here.mode)
        if (here.mode === 'pdf') {
          console.log('emitting')
          this.innerEmit('pdf-only', true)
        }
      })

where innerEmit is defined thus:

innerEmit (name, val) {
      this.$emit(name, val)
    }

The axios part is in a method (called runReport) in a vue file’s <script> section which gets called when a user clicks a button, after selecting some parameters. I also tried replacing this.innerEmit by first declaring let hereEmit = this.innerEmit just before the axios call. Still didn’t work. Did hard refreshes of the browser.

I realize this must not be specific to Quasar, so I doubly appreciate the help. I’ll also go looking on SO or something. Maybe this is a Promise issue.

I will try the async thing next. I’m not too good at converting promises to async or the other way. I seem to always miss something.

[rconstantine]

I dropped a console.log inside of innerEmit. It is getting called just fine.

innerEmit (name, val) {
    console.log('am i emitting?', name, val)
    this.$emit(name, val)
}

This gets called both times. However, the $emit isn’t reaching the parent. If I call the same $emit just after the axios block (which fires before the result of that block is ready), it does reach the parent file.

So, something is blocking the emit.

[rconstantine]

I elaborate in this post on the Vue forum: https://forum.vuejs.org/t/4-out-of-6-emit-calls-working-why-dont-the-other-2-work/71186

[rconstantine]

Figured it out. I replaced the events with props of type Function. I call them here after checking to make sure the prop is actually a function:

runReport () {
      // TODO use the else case to show error, or disable ok button
      let path = this.genPDFParamString()
      let pdfPath = ''
      let here = this

      this.$axios.get(path, { timeout: 600000 }).then(res => {
        pdfPath = res.data
        if (typeof this.pathSet === 'function') {
          this.pathSet(pdfPath)
        }
        if (here.mode === 'pdf') {
          if (typeof this.pdfOnly === 'function') {
            this.pdfOnly(true)
          }
        }
      }).catch(err => {
        pdfPath = 'PDF Error'
        console.log('error', err)
        if (typeof this.pathSet === 'function') {
          this.pathSet(pdfPath)
        }
        here.$q.notify({ message: 'Error getting PDF path. Try again.', type: 'negative', textColor: 'white', color: 'negative', icon: 'error', closeBtn: 'close', position: 'top' })
      })

      this.$emit('facility-name', this.facilityOptions.find(obj => obj === this.facility).label.substring(7))

      if (this.mode === 'report') {
        this.$emit('show-report', true)
      } else {
        this.$emit('show-report', false)
      }
    }