No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Promise puzzlement...

    Help
    3
    11
    176
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • metalsadman
      metalsadman @mboeni last edited by metalsadman

      @mboeni your operation is async, your console.log is executed before it is resolves, so you need to await that, or move your console.log inside your then.

      mboeni 1 Reply Last reply Reply Quote 0
      • mboeni
        mboeni @metalsadman last edited by

        @metalsadman Okay, how would this look? I can’t use await outside an async function as far as I am aware of, so the await would only work inside GetTopGameImageURL, but not in the actual mounted() function of the vue file…

        Assuming at some point in time topGameImageURL is updated with the URL. How would I properly make that work in the vue file anyway? I have done a v-if to only show the image if the url is not empty, but it never updates…

        1 Reply Last reply Reply Quote 0
        • metalsadman
          metalsadman last edited by

          you can make mounted async . async mounted () ...

          1 Reply Last reply Reply Quote 0
          • mboeni
            mboeni last edited by

            Okay, I’ve made a little bit of progress: Adding a watcher actually shows that the promise is resolved eventually:

              watch: {
                topGameImageURL: function () {
                  console.log('Image URL: ' + this.topGameImageURL)
                }
              }
            

            Now I just need to figure out why the image is not displayed…

            1 Reply Last reply Reply Quote 0
            • J
              jraez last edited by jraez

              as @metalsadman said, make your mounted async.

              async mounted () { // This allows you to do stuff 'on page load'
                 this.topGameImageURL = await twLib.getTopGameImageURL()
                 console.log('URL Index: ' + this.topGameImageURL)
              }
              
              1 Reply Last reply Reply Quote 0
              • mboeni
                mboeni last edited by mboeni

                @metalsadman @jraez Yep that works. console.log(..) now shows the expected output

                Still the image URL is not updated in the q-img widget. I am doing this:

                  data () {
                    return {
                      thumbStyle: { right: '4px', borderRadius: '5px', background: 'white', width: '7px', opacity: 0.7 },
                      contentStyle: { background: 'sedondary' }, // used when cursor is NOT over chat area
                      contentActiveStyle: { background: 'secondary' }, // used when cursor IS over chat area
                      localTextColor1: '',
                      localTextColor2: '',
                      topGameImageURL: '',
                      infoBlocks: [
                        { id: this.createUUID(), image: this.topGameImageURL, title: 'Top Game: ', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
                        { id: this.createUUID(), image: '', title: '', text: '' },
                        { id: this.createUUID(), image: '', title: '', text: '' },
                        { id: this.createUUID(), image: '', title: '', text: '' },
                        { id: this.createUUID(), image: '', title: '', text: '' },
                        { id: this.createUUID(), image: '', title: '', text: '' }
                      ]
                    }
                  }
                

                on the data side ant this:

                  <q-img
                    :src='infoBlock.image'
                    basic
                    :ratio="1.5"
                  >
                   <div class="absolute-bottom text-h6">
                     {{infoBlock.title}}
                   </div>
                  </q-img>
                

                to display the image. It is probably a timing issue but I was assuming that vars in the data scope are updated per tick…

                Any ideas on this?

                1 Reply Last reply Reply Quote 0
                • J
                  jraez last edited by

                  Do you have a loop or something? You don’t have infoBlock in your data.

                  1 Reply Last reply Reply Quote 0
                  • mboeni
                    mboeni last edited by

                    Yep, sorry, it’s in a v-for:

                      <q-card
                                v-for='infoBlock in infoBlocks' v-bind:key='infoBlock.id'
                                class="col q-ma-sm tileBGColor"
                                style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 300px">
                                <div v-if="infoBlock.title.length > 3">
                                    <q-img
                                      :src='infoBlock.image'
                                      basic
                                      :ratio="1.5"
                                    >
                                      <div class="absolute-bottom text-h6">
                                        {{infoBlock.title}}
                                      </div>
                                    </q-img>
                                  <q-card-section class="q-gutter-xs">
                                    {{infoBlock.text}}
                                  </q-card-section>
                                </div>
                                </q-card>
                    
                    1 Reply Last reply Reply Quote 0
                    • J
                      jraez last edited by

                      I never use self-reference in Vue component data, I’m not 100% sure it works as you expect (but I’m maybe wrong).
                      Why not feed directly infoBlocks in the mounted()?
                      like

                       this.infoBlocks[0].image = await twLib.getTopGameImageURL()
                      

                      or if you have reactivity issue, something like that:

                       this.$set(this.infoBlocks[0], 'image', await twLib.getTopGameImageURL())
                      
                      mboeni 1 Reply Last reply Reply Quote 0
                      • mboeni
                        mboeni @jraez last edited by

                        @jraez Yep, that’s what I opted for…it works now as it should 🙂

                        Thanks a lot for your help @jraez and @metalsadman !

                        Cheers,
                        M.

                        1 Reply Last reply Reply Quote 2
                        • First post
                          Last post