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



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



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



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



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


Log in to reply