[Vuejs]-It is impossible to access props until the hot update of the Vue JS + Quasar component occurs

by

3👍

✅

I think your code is not running in the order you think it is. You need to be aware of component lifecycles, and when it comes to Parent and Child hooks it goes:

Parent created –> Child created –> Child mounted –> Parent mounted

This simple Vue Playground will confirm this if you open up your browser dev tools where you can see the order of the console logs firing from different hooks.

So it comes down to the fact that you’re trying to console.log a prop value in the Child created hook, but the prop value isn’t set until the Parent mounted hook which comes afterwards.

Vue component state can be preserved during hot reloading of your code, meaning the prop value from the first run now exists when console log executes during the second run.

A possible solution if you can’t set the values you need in the Parent created hook, is to add a watcher to your Child to run whatever code you want when it detects that the watched value (a prop in you case) is updated.

setup(props) {
  console.log('created hook')

  watch(() => props.question, () => {
    // code here executes when props.question updates
  })
},

updated Vue Playground example

👤yoduh

Leave a comment