[Ignore] accessing 'this' in async response - possibly Vue question, not Quasar

rconstantine

Am I forgetting something? In one of my vue files, I have a method like this:

onShowReport (val) {
      // console.log('showing report', val)
      this.showReport = val
      if (val) {
        let myThis = this
        let isPDF = this.isPDF
        // let a = window.open('about:blank', 'Report - ' + this.selectedName + ' - ' + this.facility.value)
        let frame = this.$refs
        let frame1 = this.$refs.reportFrame
        let frame2 = this.$refs['reportFrame']
        // let frame = this.frameSrc
        console.log('showing report', val)
        let request = {
          template:
            {
              shortid: this.shortID
            },
          data: {
            reportInfo:
            {
              reportName: this.selectedName,
              locationName: this.facilityName,
              locationAbbr: this.facility.value
            },
            facility: this.facility.value
          }
        }
        this.$jsreport.renderAsync(request).then(function (res) {
          console.log('refs', frame)
          console.log('frame1', frame1)
          console.log('frame2', frame2)
          console.log('isPDF', isPDF)
          console.log('myThis', myThis)
          // console.log('Res toString', res.toString())
          if (isPDF) {
            // frame.type = 'application/pdf'
            frame.src = res.toDataURI()
            /* let html = ''
            html = '<html><head>' +
              '<style>html,body {padding:0; margin:0;} iframe {width:100%; height:100%; border:0}</style></head>' +
              '<body>' +
              '<iframe type="application/pdf" src="' + res.toDataURI() + '"></iframe>' +
              '</body></html>' */
            // a.document.write(html)
            // a.document.close()
          } else {
            // frame.type = 'text/html'
            // window.frames['reportFrame'].location = res.toDataURI()
            // frame.src = res.toDataURI()
            /* html = '<html><head>' +
              '<style>html,body {padding:0; margin:0;} iframe {width:100%; height:100%; border:0}</style></head>' +
              '<body>' +
              '<iframe type="text/html" src="' + res.toDataURI() + '"></iframe>' +
              '</body></html>'
            a.document.write(html)
            a.document.close() */
          }
        })
      }
    }

You can see all of the commented out stuff that I tried. In my template, I have an iFrame that I’m trying to fill. It is defined inside a DIV, so this is just the iframe:

<iframe id="reportFrame"
        ref="reportFrame"
        style="margin: auto; height: 100%; width: 100%;"
        :src="frameSrc"
>
</iframe>

I’ve tried:
a) changing this.frameSrc (frameSrc is defined in my data section)
b) grabbing this.$refs.reportFrame (it’s always undefined) so I can set src manually
c) other things I can’t remember

I think my problem is ‘this’. For some reason - and this may be my only problem - it isn’t valid inside the then function. I mean, it isn’t pointing at the application anyway. That’s why I tried setting let myThis = this but that didn’t seem to work either since ```console.log(‘myThis’, myThis) was undefined.

I do get a listing in the log of all refs with console.log('refs', frame). I know that the children wouldn’t be accessible until after the DOM is mounted, but the contents of my then function are well after mounting. So I don’t think it’s timing issue.

I’m going nuts here - particularly since I think it’s something obvious that I’m just not seeing. Any ideas? Any more info needed to help me noodle this out?

rconstantine

As happens every time I make a post, just about, I figured it out on my own. It’s like magic, so I should just make posts sooner!

Anyway, although myThis wouldn’t print to the log, it was working. I printed myThis.$refs and it worked. And so did printing myThis.$refs.reportFrame. So I used that to change the src and it was just fine. I still don’t get why frame1 and frame2 didn’t work though.

patryckx

@rconstantine Iframes are no longer a good practice on the current WEB. Do you really need it to be an iframe?
Why not a modal or embed?

rconstantine

Did not use Iframe. The PDF module I was trying to use was too slow for big files. So the original post code is now in the trash.

str

@patryckx What do you mean by “embed”?

dobbel

@str

https://stackoverflow.com/questions/16660559/difference-between-iframe-embed-and-object-elements

No More Posting New Topics!

[Ignore] accessing 'this' in async response - possibly Vue question, not Quasar