0

I'm calling a method from an element like so

<span>Age/Sex: </span> <span>{{ getRunnerAge() }} | {{ runner.sex }}</span>

The method is async & calls off to my actions.js file where a graphQl query is ran

  async getRunnerAge () {
    const promise = this.getCompetitorAge(this.runner.runnerId)
    const response = await promise
    console.log('runnerAgeResponse: ', response)
    return response
  },

The value I get in the console is runnerAgeResponse: 6 enter image description here

In the browser it is displaying [object Promise] enter image description here rather than the expected "6"

What can I do to to show this Promise as its value?
Can I use a function here, or this have to be a property on data?

Dimava
  • 7,654
  • 1
  • 9
  • 24
Possam
  • 363
  • 4
  • 18
  • 1
    Async functions _always_ return promises. – jonrsharpe Aug 28 '23 at 21:47
  • 2
    Looks like the method call in the element is not treated the same way as `await getRunnerAge()` would be. Seeing as this is vuejs (and not plain javascript as the duplicate message suggests) you could look into using a reactive variable. Echo the variable in the template, update the variable after running `getRunnerAge()` in your setup method. – halfpastfour.am Aug 28 '23 at 21:47
  • 1
    Thank you @halfpastfour.am this led me to check out different questions in SO & came across this which may help https://stackoverflow.com/questions/68198166/how-can-i-use-async-function-in-vue-template – Possam Aug 28 '23 at 21:54
  • This can be made with `@vueuse/core/asyncComputed` or with a `ref`. I can answer if this gets reopened – Dimava Aug 28 '23 at 22:01

0 Answers0