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



  • 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.



  • 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…



  • 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.



  • 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.





  • 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)
          }
        }
    

Log in to reply