Nuxt•2y ago•

51 replies

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

배

배재환OP•4/19/24, 6:15 AM

manniL•4/19/24, 6:19 AM

A reproduction would be helpful. See #Support Forum - Guidelines & Instructions

Also, any errors in the console?

MmanniL A reproduction would be helpful. See #Support Forum - Guidelines & Instructions...

배

배재환OP•4/19/24, 6:21 AM

no errors

배

배재환OP•4/19/24, 6:22 AM

what is reproduction?

배

배재환OP•4/19/24, 6:24 AM

https://kekidev.vercel.app/

배

배재환OP•4/19/24, 6:24 AM

this is the website

배배재환 what is reproduction?

manniL•4/19/24, 7:21 AM

did you read the linked thread?

MmanniL did you read the linked thread?

배

배재환OP•4/19/24, 11:53 AM

Yes but I quite can't understand it I'm not native English speaker

Room 208•4/19/24, 12:02 PM

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

Room 208•4/19/24, 12:03 PM

for example

<div v-for="card in cardItems" :key="card.title">

<div v-for="card in cardItems" :key="card.title">

RRoom 208 From looking at your website, it appears that it's not just the list that doesn'...

배

배재환OP•4/19/24, 1:03 PM

no v-if or v-show in my project and adding key didn;t work

Room 208•4/19/24, 1:03 PM

Hmm, how about in your navigation, how are you getting to the /projects page from the nav click?

배

배재환OP•4/19/24, 1:05 PM

@Room 208 here

Room 208•4/19/24, 1:09 PM

Does it work correctly if you just have
<NuxtLink to="/projects">Projects</NuxtLink> ?

Not really sure where the issue is here...

Room 208•4/19/24, 1:20 PM

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 :/

Room 208•4/19/24, 1:24 PM

All your routes are rendering in <NuxtPage /> ?

RRoom 208 All your routes are rendering in <NuxtPage /> ?

배

배재환OP•4/19/24, 1:46 PM

yes

배

배재환OP•4/19/24, 1:46 PM

배

배재환OP•4/19/24, 1:52 PM

im running npm update rn

배

배재환OP•4/19/24, 1:56 PM

same result

배

배재환OP•4/19/24, 1:57 PM

should i just hard code my projects

Room 208•4/19/24, 2:00 PM

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?

RRoom 208 I feel like it's not the loop that's causing the issue, but i mean it could be? ...

배

배재환OP•4/19/24, 2:04 PM

배

배재환OP•4/19/24, 2:04 PM

loop wasnt causing the error

Room 208•4/19/24, 2:04 PM

okay, at least we've figured that out!

배

배재환OP•4/19/24, 2:05 PM

yay

Room 208•4/19/24, 2:05 PM

how about your pages folder structure, how does that look?

RRoom 208 how about your pages folder structure, how does that look?

배

배재환OP•4/19/24, 2:06 PM

hhere

Room 208•4/19/24, 2:06 PM

ahh okay

Room 208•4/19/24, 2:08 PM

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

Room 208•4/19/24, 2:09 PM

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?

RRoom 208 so just to test this, can you rename the index.vue in projects to projects.vue, ...

배

배재환OP•4/19/24, 2:10 PM

still dosen't work

배

배재환OP•4/19/24, 2:10 PM

https://capture.dropbox.com/DR2SRT7txRM6YPtQ

Dropbox Capture

Create and share screenshots, screen recordings, and video messages with the Dropbox Capture. Download and try Capture for free.

Room 208•4/19/24, 2:11 PM

your folder structure is /pages ?

index.vue
projects.vue

index.vue
projects.vue

배

배재환OP•4/19/24, 2:11 PM

yep

배

배재환OP•4/19/24, 2:12 PM

Room 208•4/19/24, 2:12 PM

uhmm weird.. can you try restarting your dev server?

배

배재환OP•4/19/24, 2:12 PM

same reesults

배

배재환OP•4/19/24, 2:12 PM

should i re make my web

Room 208•4/19/24, 2:14 PM

okay wait can we try this.

make a folder called index
put projects.vue into that folder

Room 208•4/19/24, 2:15 PM

kinda like in the screenshot i sent you

배

배재환OP•4/19/24, 2:15 PM

Room 208•4/19/24, 2:16 PM

(I'm just guessing at this point, this works for me so i'm not sure why it woudln't for you)

RRoom 208 (I'm just guessing at this point, this works for me so i'm not sure why it woudl...

배

배재환OP•4/19/24, 2:16 PM

i think my npm packages are deprecated

배

배재환OP•4/19/24, 2:16 PM

ill just re make it

배

배재환OP•4/19/24, 2:16 PM

thanks for help

Room 208•4/19/24, 2:16 PM

eh no problem. Sorry i couldn't help you figure it out

Room 208•4/19/24, 2:17 PM

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"

Room 208•4/19/24, 2:18 PM

best of luck to you!

배

배재환OP•4/19/24, 2:18 PM

yep

v-for not rendering and rendered when i reload page

Similar Threads

Similar Threads

Similar Threads