InertiaJS - Data was accessed during render but is not defined on instance

Hi, can anyone help me with this error message? What I'm trying to do is getting data from the database and display it on my homepage but my component won't render because I get this error:

[Vue warn]: Property "posts" was accessed during render but is not defined on instance. (21)
"
"
" at <Layout>"
"
"
" at <Homepage"
"errors="
{}
"posts="
[Object] (1)
"key=null"
">"
"
"
" at <Inertia"
"initialPage="
{component: "Homepage", props: Object, url: "/", version: "5e5397f9f5e7a5ff4574adb97044915e"}
"initialComponent="
{name: "Homepage", components: Object, render: function, __file: "resources/js/Pages/Homepage.vue", __v_skip: true, …}
"resolveComponent=fn<m>"
" ..."
">"
"
"
" at <App>"

I'm not sure what code you need to be able to solve it.

zabeh

4 years ago

Level 13

Share Home Component.

hjortur17

4 years ago

Level 14

@zabeh - Here is my Homepage component

<template>
    <Layout>
        <a href="#" class="flex items-center mb-4 link">
            <span class="pr-4">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current"><!-- Font Awesome Pro 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M463.952 0H48.057C5.419 0-16.094 51.731 14.116 81.941L176 243.882V416c0 15.108 7.113 29.335 19.2 40l64 47.066c31.273 21.855 76.8 1.538 76.8-38.4V243.882L497.893 81.941C528.042 51.792 506.675 0 463.952 0zM288 224v240l-64-48V224L48 48h416L288 224z"/></svg>
            </span>
            Sort
        </a>

        <section class="space-y-24">
            <div v-for="post in posts" :key="post.title">
                <preview post="{{ post }}"></preview>
            </div>
        </section>
    </Layout>
</template>

<script>
import Layout from "../Shared/Layout";
import Preview from "../Shared/Preview";

export default {
    name: "Homepage",
    components: { Layout, Preview }
}
</script>

And here is my Preview

<template>
    <div class="flex space-x-12" :class="{'flex-row-reverse space-x-reverse': alignment === 'left'}">
        <div class="grid grid-cols-1 content-between py-8">
            <h2 class="text-4xl leading-10 w-full link">{{ post.title }}</h2>
            <div class="flex">
                <img src="" alt="">
                <div>
                    <h4>{{ post.author }}</h4>
                    <small>Skrifað þann {{ post.created_at }}</small>
                </div>
            </div>
            <p class="w-full">{{ post.content }}</p>
            <span class="py-2 px-4 bg-purple-200 text-purple-900 rounded w-40 max-w-xs text-center hover:bg-purple-100 transition-all duration-300 cursor-pointer">
                <span class="font-bold uppercase">#apple</span>
            </span>
        </div>
        <img src="https://images.unsplash.com/photo-1556656793-08538906a9f8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1740&q=80" alt="" class="w-1/2 h-auto rounded object-center bg-center bg-cover">
    </div>
</template>

<script>
export default {
    name: "Preview",
    props: ['alignment', 'post']
}
</script>

<style scoped>
.space-x-reverse { --space-x-reverse: 1 }
</style>

sidneygijzen

4 years ago

Best Answer

Level 18

@hjortur17 The HomePage component is missing a posts property. Adding it should resolve the error you're getting.

So this

export default {
    name: "Homepage",
    components: { Layout, Preview }
}

should be:

export default {
    name: "Homepage",
    components: { Layout, Preview },
    props: ['posts']  // <-- added 'posts' prop
}

Please or to participate in this conversation.