1

I am currently facing a weird issue with NuxtJS.

After creating a mixing for a component I can access / print a field from the components data.

export default () => {
  return {
    head () {
      console.log(this.story)
    }
  }
}

Works fine. But after I try to access the object story itself, it becomes undefined.

export default () => {
  return {
    head () {
      console.log(this.story)
      const title = this.story.content.title
      console.log(title)
    }
  }
}

Cannot read property 'content' of undefined

The log statement of this.story is then undefined too.

The component where I registered this mixin makes use of another one with return the story data field.

export default{
  name: 'Default',
  components: {Page},
  mixins: [
    FetchData({
      preview: false
    }),
    addMetaTags()
  ]
}

Did I miss something?

kissu
  • 40,416
  • 14
  • 65
  • 133
Markus G.
  • 1,620
  • 2
  • 25
  • 49
  • `this.story` is probably not defined yet when you `console.log` it? At which point is your mixin creating your `story`, lifecycle-wise. – kissu Jul 29 '21 at 08:13
  • in the async fetch() hook – Markus G. Jul 29 '21 at 08:13
  • 2
    btw console.log(obj) does not log a string representation, it logs a reference to the actual javascript object in the memory. So any changes made to the object will get reflected in the logged instance. see [this](https://stackoverflow.com/questions/15528322/javascript-console-log-gives-different-results-than-alert) answer. Debugging with console.log is therefore not really a good idea. – Braks Jul 29 '21 at 08:19
  • I'm not sure which one is done before the other. You could maybe check the status of `$fetchState.pending` and see if it returns anything at all. Also yeah, @braks is right on this one. Either stringify or alertify it, who know. :D – kissu Jul 29 '21 at 08:21
  • :Braks I know thanks. The console statement is just for the matter of purpose to demonstrate the error behaviour. :kissu Exact same behaviour. At first it is called with undefined and immediately after it is "false" – Markus G. Jul 29 '21 at 08:28
  • Yep, so probably something to do with lifecycles. – kissu Jul 29 '21 at 14:58

0 Answers0