Nuxt•2y ago

Accessing Object get undefined

Currently i'm accessing the object through this

{{data.jumbotronImage}}

{{data.jumbotronImage}}

it shown

{ "data": { "id": 1, "attributes": { "name": "wedding.png", "alternativeText": null, "caption": null, "width": 599, "height": 580, "formats": { "thumbnail": { "name": "thumbnail_wedding.png", "hash": "thumbnail_wedding_ab2be20afd", "ext": ".png", "mime": "image/png", "path": null, "width": 161, "height": 156, "size": 54.02, "url": "/uploads/thumbnail_wedding_ab2be20afd.png" }, "small": { "name": "small_wedding.png", "hash": "small_wedding_ab2be20afd", "ext": ".png", "mime": "image/png", "path": null, "width": 500, "height": 484, "size": 417.07, "url": "/uploads/small_wedding_ab2be20afd.png" } }, "hash": "wedding_ab2be20afd", "ext": ".png", "mime": "image/png", "size": 144.91, "url": "/uploads/wedding_ab2be20afd.png", "previewUrl": null, "provider": "local", "provider_metadata": null, "createdAt": "2023-03-23T06:45:30.385Z", "updatedAt": "2023-03-23T06:45:30.385Z" } } }

{ "data": { "id": 1, "attributes": { "name": "wedding.png", "alternativeText": null, "caption": null, "width": 599, "height": 580, "formats": { "thumbnail": { "name": "thumbnail_wedding.png", "hash": "thumbnail_wedding_ab2be20afd", "ext": ".png", "mime": "image/png", "path": null, "width": 161, "height": 156, "size": 54.02, "url": "/uploads/thumbnail_wedding_ab2be20afd.png" }, "small": { "name": "small_wedding.png", "hash": "small_wedding_ab2be20afd", "ext": ".png", "mime": "image/png", "path": null, "width": 500, "height": 484, "size": 417.07, "url": "/uploads/small_wedding_ab2be20afd.png" } }, "hash": "wedding_ab2be20afd", "ext": ".png", "mime": "image/png", "size": 144.91, "url": "/uploads/wedding_ab2be20afd.png", "previewUrl": null, "provider": "local", "provider_metadata": null, "createdAt": "2023-03-23T06:45:30.385Z", "updatedAt": "2023-03-23T06:45:30.385Z" } } }

But, whenever i try to access the

{{data.jumbtronImage.data}}

{{data.jumbtronImage.data}}

error 500 Cannot read properties of undefined (reading 'data') is all i got. am i missing something?

20 Replies

manniL•2y ago

@less show us your call. If you don't await useFetch, data will be null before the call has been made

lessOP•2y ago

await $fetch("http://localhost:1337/api/landing-page?populate=*", {
  method: "get",
})
  .then((res) => (data = res.data.attributes))
  .catch((err) => console.log(err));

await $fetch("http://localhost:1337/api/landing-page?populate=*", {
  method: "get",
})
  .then((res) => (data = res.data.attributes))
  .catch((err) => console.log(err));

Here's my call

manniL•2y ago

of your script setup block is this on top-level? .then((res) => (data = res.data.attributes)) data is no ref here and thus not reactive

lessOP•2y ago

Pardon for my mistakes, but i've declared the data on top of the $fetch call

let data = ref({});

let data = ref({});

I've been accessing others response and it works just fine, like :

{{ data.headerDescription }}

{{ data.headerDescription }}

and

{{ data.headerTitle }}

{{ data.headerTitle }}

, just for the jumbotronImage , it kinda breaking up when accesing the {{data.jumbtronImage.data}}

manniL•2y ago

@less can you try useFetch instead? 🤔 const { data } = await useFetch('http://localhost:1337/api/landing-page?populate=*') (and then use data.data.attributes or write a computed) yes, because data is an empty object. {}.whatever will be undefined, but {}.whatever.x will throw because {}.whatever is undefined and undefined.x will throw

lessOP•2y ago

Thankyou, sir for the help. ill give it a try to use useFetch

manniL•2y ago

No problem 👍

lessOP•2y ago

if i may ask some question again, sir. right now i am using useFetch, but the data won't display until i made some changes (in this case console.log) , but after the refresh, the data dissapeared. did i made a mistakes? @manniL / TheAlexLichter

manniL•2y ago

that's weird. Should not happen at all 🙈 How do you further use data? Can you show the full code?

lessOP•2y ago

https://gist.github.com/drigoalexander/b86708fc0490730817d8e7d8e48c4f0d

Gist

help.vue

GitHub Gist: instantly share code, notes, and snippets.

lessOP•2y ago

here's the code, sir. it's kinda confused me about the difference between useFetch and $fetch, is it rendered in server or client side?

lessOP•2y ago

if i use the $fetch, it work just fine for all the data i've been accessing. if i access the data.jumbotronImage it is still show the result, weirdly if i access the data.jumbotronImage it break up as shown in the video, sir. @manniL / TheAlexLichter

manniL•2y ago

$fetch will refetch on client-side (so 2 calls) while useFetch will ensure that the data is fetched server-side and will be transferred over (in very simple terms) when using useFetch, you might have to use data.data.attributes (because of how the response comes back) @less and your API is not from /server?

lessOP•2y ago

no it is not, i'm new to nuxt 3 sir

manniL•2y ago

strange. it should work pretty well. any errors in the console?

lessOP•2y ago

there's an error in console said like this "Hydration children mismatch in <div>: server rendered element contains fewer child nodes than client vdom"

manniL•2y ago

ah, that's indeed an issue 👀

manniL•2y ago

check if you generate valid HTML, either manually or via https://github.com/nuxt-modules/html-validator

GitHub

GitHub - nuxt-modules/html-validator: HTML validation for Nuxt

HTML validation for Nuxt. Contribute to nuxt-modules/html-validator development by creating an account on GitHub.

manniL•2y ago

more info: https://blog.lichter.io/posts/vue-hydration-error/

blog.Lichter.io

What to do when Vue hydration fails

SSR is amazing but also comes with errors you might have not seen before. Especially one problem still boggles lots of minds: When Vue Hydration fails. In this article we will take a look at possible reasons, explain what the error means and how to fix it

lessOP•2y ago

Thankyou sir for the blogs, and thankyou for the help and your time🙏

Gaming

Programming

Accessing Object get undefined