Vue 3 using function inside setup

Question

I am doing a simple app and I am using mock-json-server to simulate http request.

I have defined a function to get the info I need :

import { ref } from 'vue'

const getScores = () => {
const scoringPass = ref([])
const error = ref(null)

const load = async () => {
  try {
    let data = await fetch('http://localhost:8000/scores', {
    method: 'get',
    headers: {
        'content-type': 'application/json'
    }})
    if (!data.ok) {
          throw Error('no data available')
    }
    scoringPass.value = await data.json()
    console.log(scoringPass.value)
  } catch (err) {
    error.value = err.message
    console.log(error.value)
  }
}
return { scoringPass, error, load }
}

export default getScores

And I call it in the setup function of my component :

  <script lang="ts">
    import { defineComponent } from 'vue'
    import Pass from '@/components/Pass.vue'
    import getScores from '../composables/getScores.js'

    export default defineComponent({
    setup() {
      const numeroDossier = '25020230955000004'
      const { scoringPass, error, load } = getScores()

      load()
      return { numeroDossier, scoringPass, error }
    },
    components: {
      Pass,
     },
    })
    </script>

In the console.log(scoringPass.value) in the function, I can see the data. but the load() function in the setup part does not work and I can't figure out why. It is called though, but I can't get the data.

When I do console.log(load()), I get :

Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: undefined

Any help appreciated. Cheers.

How are you using the refs in the template? Could you verify that reactivity is behaving well using a watch? — user19015424
– user19015424, Commented May 3, 2022 at 11:34

tony19 · Accepted Answer · 2022-05-03 23:08:32Z

2

load() is async, so its return value is a Promise. You have to await the call to get the underlying data. However, load() doesn't actually return anything, so you still wouldn't see any data. If you want load() to provide the initial value of scoringPass, load() should return that:

const load = async () => {
  try {
    ⋮
    return scoringPass.value
  } catch (err) {
    ⋮
    return null
  }
}

To get the result of load(), you can wrap the call in an async function to await the call; or chain a .then() callback:

export default defineComponent({
  setup() {
    ⋮
    const logLoadResults = async () => console.log(await load())
    logLoadResults()

    // or
    load().then(results => console.log(results))
  }
})

Don't mark setup() as async because that would make your component an async component, requiring a <Suspense> in a parent component to render it.

edited May 3, 2022 at 23:08

answered May 3, 2022 at 21:06

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue 3 using function inside setup

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related