v-for not rendering and rendered when i reload page
here is my code 🙂 and this only happens when im at home page and press navbar "projects" button
35 Replies
A reproduction would be helpful. See #Support Forum - Guidelines & Instructions
Also, any errors in the console?
did you read the linked thread?
Yes but I quite can't understand it I'm not native English speaker
From looking at your website, it appears that it's not just the list that doesn't render, it's the entire page?
Do you have a v-if or a v-show or some kind of condition somewhere else in the project?
Also consider adding a key to each article
for example
no v-if or v-show in my project and adding key didn;t work
Hmm, how about in your navigation, how are you getting to the /projects page from the nav click?
@Room 208 here
Does it work correctly if you just have
<NuxtLink to="/projects">Projects</NuxtLink> ?
Not really sure where the issue is here...
just some ideas and notes:
check what nuxt version you're on, maybe it needs an update?
when i click on projects from the home page, the navbar shifts up to the top from where it originally was.
if i refresh, it's back in the same position as it was on the homepage.
I feel like that's the where the problem is, but i'm unsure what it could be :/
All your routes are rendering in <NuxtPage /> ?
yes
im running npm update rn
same result
should i just hard code my projects
I feel like it's not the loop that's causing the issue, but i mean it could be?
if you comment out the looped projects and just put a simple <h1>hello</h1>, are you able to succssfully navigate to the page and see the hello?
no
loop wasnt causing the error
okay, at least we've figured that out! 🙂
yay
how about your pages folder structure, how does that look?
hhere
ahh okay
to be honest i'm pretty new to nuxt as well, but here's an example of how i've set mine up.
I believe that when you name your pages, if they are not children of another route and you're using the NuxtLink to="/route", you need to have the name of the route match the name of the page
so just to test this, can you rename the index.vue in projects to projects.vue, and then move it out to be on the same level as index.vue?
still dosen't work
Dropbox Capture
Create and share screenshots, screen recordings, and video messages with the Dropbox Capture. Download and try Capture for free.
your folder structure is /pages ?
yep
uhmm weird.. can you try restarting your dev server?
same reesults
should i re make my web
okay wait can we try this.
make a folder called index
put projects.vue into that folder
kinda like in the screenshot i sent you
ok
(I'm just guessing at this point, this works for me so i'm not sure why it woudln't for you)
i think my npm packages are deprecated
ill just re make it
thanks for help
eh no problem. Sorry i couldn't help you figure it out
for what it's worth,
i'm on node v20.9.0
npm: 10.1.0
nuxt: "^3.10.0"
"vue": "^3.4.14",
"vue-router": "^4.2.5"
best of luck to you!
yep
thank you