Exploring Vue 3's composition API and its impact on managing undefined variables within the

Question

Exploring Vue 3's composition API and its impact on managing undefined variables within the

As a newcomer to Vue.js, I encountered an issue while working on my initial project that seems to be related to the component's lifecycle.

Here is the scenario: I am using Vue 3 with the composition API.

Within my "Map" component, I utilize d3.js to display a chart. In my Setup() method, I have both onBeforeMount() and onMounted() functions. In onBeforeMount(), I attempt to fetch data from my Firestore database for the chart values. The data appears correctly when logged on line 47. However, in onMounted(), where I intend to create my d3 chart, I find that the data is undefined when accessed (as seen on line 55)...

My goal is to retrieve data from the database within the "Map" component to generate the chart, allowing another component called 'MapSettings' to modify the data or filters and automatically update the chart accordingly. Both components will share the same parent component, positioning "Map" and "MapSettings" as siblings within the hierarchy.

But before proceeding further, understanding why the data is coming back as undefined is crucial. Any assistance or suggestions would be highly appreciated!

https://i.stack.imgur.com/u4Zwt.png

https://i.stack.imgur.com/nu0YI.png

vue.js vue-component vuejs3 vue-composition-api

Answer 1

Answer №1

Your lifecycle hooks are well-written. The issue you're encountering is related to the execution of asynchronous and synchronous code.

You have a function that utilizes the async-await feature, which means it will run asynchronously. In this scenario, you're fetching data from Firestore and storing it in a reference during onBeforeMount().

Conversely, you have a standard function within onMounted() where you attempt to access the value of the reference. However, because the function defined in onBeforeMount() has not completed its execution (or is still in the event queue) when onMounted is triggered, you end up with a result of undefined.

This explains why you initially see the console.log output from onMounted.

A possible solution is to combine both functions into one lifecycle hook and utilize 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 data here...
  })
}

It's important to note that you cannot "pause" a lifecycle hook with async-await. What actually pauses is the function that Vue plans to execute within that hook. This distinction is crucial as pausing an entire hook would not be efficient.

Answer 2

Your lifecycle hooks are well-written. The issue you're encountering is related to the execution of asynchronous and synchronous code.

You have a function that utilizes the async-await feature, which means it will run asynchronously. In this scenario, you're fetching data from Firestore and storing it in a reference during onBeforeMount().

Conversely, you have a standard function within onMounted() where you attempt to access the value of the reference. However, because the function defined in onBeforeMount() has not completed its execution (or is still in the event queue) when onMounted is triggered, you end up with a result of undefined.

This explains why you initially see the console.log output from onMounted.

A possible solution is to combine both functions into one lifecycle hook and utilize 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 data here...
  })
}

It's important to note that you cannot "pause" a lifecycle hook with async-await. What actually pauses is the function that Vue plans to execute within that hook. This distinction is crucial as pausing an entire hook would not be efficient.

Answer 3

Answer №2

Dealing with a similar issue, I am trying to access imgsRef.value outside of the onBeforeMount scope. How can I retrieve imgsRef value from outside of the beforeMount scope?

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

// Even when I try to log here, the value remains empty
console.log(imgsRef.value)

Answer 4

Dealing with a similar issue, I am trying to access imgsRef.value outside of the onBeforeMount scope. How can I retrieve imgsRef value from outside of the beforeMount scope?

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

// Even when I try to log here, the value remains empty
console.log(imgsRef.value)

Exploring Vue 3's composition API and its impact on managing undefined variables within the

Answer №1

Answer №2

Similar questions

Having trouble utilizing props with Vue axios? Running into an undefined error? Unsure how to properly use props with axios?

Getting props value in parent component using Vue JS

Display a Vue.js div element based on conditions matching a specific variable value

What is the reason for the sharing of component data between two separate components using vue-apollo?

Encountering an issue while invoking the helper function in Vuejs

Tips for resolving the "semicolon expected" alerts in your CSS code (css-semicolonexpected)

The issue with combining Laravel 5.4 event broadcasting and Vue.js has been a challenging obstacle to

How can you identify when a Vuetify radio button is re-selected?

Experience a clean slate with Vue.js 3 after running 'vue serve'

NavigAuth - NativeScript Vue's Innovative Authentication-driven Navigation

Utilizing the Power of GrapesJs in Vue3

Incorporating Vue Component According to URL Parameters Dynamically

When using @mouseover, it is not possible to modify a variable's value

Is there a way for me to adjust the font size across the entire page?

When attempting to add validation to the datepicker component in Vue.js, the default behavior displays an error message automatically

Creating an array of objects data is a breeze with Vue.js

What is the most efficient way to transfer data from PHP Laravel to Vue.js and automatically update a Vue.js component whenever the data is modified?

Exploring methods to iterate through information in a Java enumeration and display it within a VueJS component

How can I modify the query parameter value in vue-router?

NuxtJs: Oops! It looks like NuxtError is not defined in this context