Vue 3 composition API, undefined variable, lifecycle

Question

I am quite new to Vue.js and while developing my first project i have stumbled upon a problem which I think is related to the component's lifecycle.

The context is the following: I am using Vue 3 with composition API.

I have a "Map" component in which I use d3.js to show a chart. In my Setup() method I have onBeforeMount() and onMounted(). In onBeforeMount() method, I want to use data from my Firestore database for the values in the chart. The console.log on line 47 shows the data correctly. In onMounted(), is where I plan to put my d3 chart. But when I try to access the data as in console.log on line 55, I get undefined...

Ideally, from "Map" component, I want to fetch the data from my database and use it in order to create the chart and then have the component render the chart. Then I would have another component called 'MapSettings" that will be able to alter the data in "Map" such as filters etc...and have the values automatically updated in the chart. Finally, both components will be siblings and have same parent component. So "Map" and "MapSettings" are on same hierarchical level.

But first I need to understand why I am getting undefined.. Any help or suggestion would be greatly appreciated!

Please, don't post the code as images, meta.stackoverflow.com/questions/285551/… . It cannot be copied or searched. — Estus Flask
– Estus Flask, Commented Nov 29, 2021 at 13:04

Lucas David Ferrero · Accepted Answer · 2021-11-29 15:32:18Z

Your lifecycle hooks look nice. The problem that you're facing has to do with code been executed asynchronously and code been executed synchronously.

You're declaring a function that uses async-await feature. This function will be executed asynchronously. In this case, you're getting data from Firestore and storing it in a ref at onBeforeMount().

On the other hand, you're declaring a normal function at onMounted() trying to access a ref's value, which will result in undefined because the function that you define at onBeforeMount() didn't finish its execution (or it's in the event queue) when onMounted is called.

That's why you first see the console.log that comes from onMounted.

One solution would merge both functions in one lifecycle hooks and use async await:

setup() {
  const {actorDocs, load} = getActorDocs()
  const actorsData = red([])

  // load actor data from db
  onBeforeMount( async () => {
    await load()
    actorsData.value = actorDocs
    console.log(actorsData.value)
    // manipulate it here...
  })
}

Keep in mind that you cannot pause with async-await a lifecycle hook. What you're pausing is the function that Vue will execute in that hook. Indeed, this is really nice because pausing a hook wouldn't be efficient at all.

cahya faisal reza · Accepted Answer · 2022-08-23 16:09:20Z

0

i face that problem, in my case i want use imgsRef.value out of onBeforeMount scope. How to get imgsRef value out of beforeMount scope?

onBeforeMount( async () => {
  await axios
  .get("http://localhost:3000/ourMoment")
  .then((response) => {
    imgsRef.value = response.data
    
    // imhsRef get the value from api
    console.log(imgsRef.value.photo)
  })
})

// i try to concole.log here but the value still empty
console.log(imgsRef.value)

answered Aug 23, 2022 at 16:09

cahya faisal reza

113 bronze badges

Collectives™ on Stack Overflow

Vue 3 composition API, undefined variable, lifecycle

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related