Nuxt.js returning TypeError: Cannot read property 'url' of undefined

[joeri (Joeri Minnekeer)]

Hi,

I'm having some troubles with creating a prismic-link within the Nuxt.js framework.
All seems to go smoothly, but when I click on a link to go to another page, it throws following error:

The code in my slice component:

<prismic-link v-if="slice.text.length > 0" :field="slice.url">{{ slice.text }}</prismic-link>

And the code how I fetch the content in the parent component:

export default {
  data() {
    return {
      headerNav:[ ]
    }
  },
  async fetch() {
  // Fetch Header & Footer navigatie
    const headerNav = await this.$prismic.api.getSingle("navigation");
    this.headerNav = headerNav.data.nav_header;
  },
};

Any insights would be much appreciated as I have been searching for hours for a solution and Google search has proven to be not much of a help.

Thanks!

[juliandreas]

It's probably because slice.url doesn't exist somewhere where you said it should and your v-if="slice.text.length > 0 is wrong, because slice.text is an Array.

Try v-if="slice.text[0].text" instead.

[joeri (Joeri Minnekeer)]

Thanks for your reply Juli!

I have tried your approach and the result now is that I do indeed get a 'url is not defined' error now.
The strange thing is that I only get this after I click on a url, not on the initial page load. The url's are linking like they should then. Am I doing something wrong in the fetch that gives me this error?

I'm really confused as to why it gives me that undefined statement..

[juliandreas]

It's not strange, since you probably have an url call inside of that header component that is not there.

I'm just assuming now that this comes from your header component. If the website is static and you recently did some changes to the header component API json, you might want to try to update that header component inside prismic (just do some changes and save + republish).

If this doesn't work. Comment out everything you have in your header vue component (and it should work), and then start uncommenting one row at a time and see where it breaks.

It's hard to debug this without seeing your code or prismic setup.

[joeri (Joeri Minnekeer)]

Hi Juli,

Thank you for you feedback. I changed all the files I could think of without any success.

If you want, you can have a look at my project:
https://github.com/Digily/digily_nuxt.git

It is just a sample project to learn more about Nuxt.js.

Thank you so much for your help so far!

[juliandreas]

@joeri

If you want, you can have a look at my project:
GitHub - Digily/digily_nuxt: Digily website on Nuxt.js

It's private

[joeri (Joeri Minnekeer)]

Hey Juli, should be public now!

[joeri (Joeri Minnekeer)]

Hi Juli,

Did you manage to pull the github project now?

[juliandreas]

Havn't had time to check it out yet. Hopefully someone from Prismic will take a look on it!

[Priyanka (Priyanka Maheshwari)]

Hello Joeri,

Welcome to the Prismic Forum and thanks for reaching out to us.

I'd be happy to troubleshoot this. I looked into your Github project repo. Could you please provide me more information about the Github branch and the files where you have this issue?

Thanks,
Priyanka

[joeri (Joeri Minnekeer)]

Hi Priyanka,

Thank you for having a look at my project!

The Github branch is the main branch since I'm soloing this project
So where is the issue exactly:

In 'layouts > default.vue' I include 'TheHeader.vue' component.

Inside that component I call 'TheHeaderNav.vue' component.

Inside 'TheHeaderNav.vue' I fetch the single nagivation prismic model called 'navigatie'.
I pass this as a 'headerNav' object inside the component 'TheHeaderNavSlices.vue'.

Inside that component I have 2 other components 'HeaderNavLinkSlice' & HeaderNavAnchorSlice'
There I insert the headerNav property inside a object to render the link.

Prismic:
Inside Prismic, the navigation model is set up with 2 tabs: nav_header & nav_footer.
Inside each tab I use slices for different types of navigation (ex: link / anchor)

The issue:

When loading the app for the first time, all renders correctly, but when I click on a link (ex: 'Over') it gives me the error message: 'Cannot read property 'url' of undefined.'

I have no idea why it does that, since all seems to work on the inital load.

Many thanks for hearing me out Priyanka!

[Priyanka (Priyanka Maheshwari)]

Thanks for the detail. But, I couldn't find 'HeaderNavLinkSlice' & HeaderNavAnchorSlice' inside the component.
I can see only this:

Is this your updated repository: https://github.com/Digily/digily_nuxt.git

Let me know If I'm missing something here.

Thanks,
Priyanka

[joeri (Joeri Minnekeer)]

Hi Priyanka,

I'm sorry, the latest version was not online.
I now pushed the most recent version!

[Priyanka (Priyanka Maheshwari)]

Hello @joeri,

I dived into your code and found that the issue is generating from index.vue file in the over-digily folder.
Can you try this with asyncData hooks instead of fetch? I've changed your code from fetch hook to asyncData and It works. Please find the screenshot:

Let me know If you have any doubt.

Thanks,
Priyanka

[joeri (Joeri Minnekeer)]

Hi Priyanka,

Thank you for taking the time to follow up on this!
I'll have a look later today!