Nuxt.js: Please Help! router-view vs nuxt component

[PiusNyakoojo]

Hello there,

I am using the "nuxt" component to embed route components in a layout but it seems that events from v-on are not being listened to.

This is something that is expected to work but doesn't:

<nuxt v-on:some-event="doSomething()" />

Should I be using \error in the console that reads

[Vue warn]: Error in mounted hook: "TypeError: Cannot set property '$loading' of undefined"

(found in <Root>)

Thank you very much! 😄

_{This question is available on Nuxt.js community (#c968)}

[heejongahn]

Based on the error message, my guess is the problem is not about using v-on on nuxt but that you are referring to wrong this in mounted. This can happen if you use an arrow function as mounted lifecycle hook - see the documentation.

Can you embedded the entire code or the repository regarding this error?

[heejongahn]

Never mind - looks like $loading is nuxt internal and I also checked that @click doesn't work on <nuxt /> too.

Still, embedding the code would help IMO. Sorry for the confusion 😅 and good luck!

[PiusNyakoojo]

Here is a simplified example of the source code we are working with.

https://glitch.com/edit/#!/stupid-hide?path=package.json:13:37

Here is the demo:

https://stupid-hide.glitch.me/

[alexchopin]

@PiusNyakoojo why don't you use the store in this case?

[PiusNyakoojo]

Well, this was a simple case.

The code looks more like this:

<router-view
  :dark-header="darkHeader"
  v-on:show-media="selectDialog(dialogTypes.media, $event)"
  v-on:show-error="selectDialog(dialogTypes.error, $event)"
  v-on:show-message="selectDialog(dialogTypes.message, $event)"
  v-on:are-you-sure="selectDialog(dialogTypes.areYouSure, $event)"
  v-on:set-dark-header="setDarkHeader($event)"
  v-on:dialog-selected="selectDialog($event)"
  v-on:close-dialog="hideOverlay()"></router-view>

Are you suggesting to use the store to communicate these things? That could work. I'll have to think about the complexity of this implementation. On initial thought it seems so bothersome, but maybe it's not 😅

[PiusNyakoojo]

After some thought, your suggestion seems to work better than doing things in the default layout.

Thanks a lot @alexchopin 😃
Thanks also to you @heejongahn 😊

For those who might benefit from this, here is the source code of the previous example updated to use the store technique:

https://glitch.com/edit/#!/aspiring-iron?path=package.json:2:22

Here is the demo:

https://aspiring-iron.glitch.me/

[Prozi]

replace <router-view></router-view> with <nuxt></nuxt> if u got similar problem

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.