Level 104
Everything looks correct; except maybe a typo PostPage or PostsPage
The corresponding PostPage.vue file
return inertia('PostsPage',[
Have you checked Vue devtools in the browser?
Mar 6, 2022
6
Level 4
Laravel + Inertia.js not passing props to vue.js
Hi I don't understand why my code isn't sharing the props I define in my web.php file...
my Web.php route
use Illuminate\Support\Facades\Route;
Route::get('/posts', function () {
return inertia('PostsPage',[
'username'=>'Emil'
]);
});
The corresponding PostPage.vue file
<template lang="">
<Head title="EBAdev - Posts" />
<div class="text-xl">
This is a super simple webpage
<p>{{ username }}</p>
</div>
</template>
<script setup>
defineProps({ username: String });
</script>
My resources/js/app.js file:
import { createApp, h } from "vue";
import { createInertiaApp, Link, Head } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";
import Layout from "./components/layout/AppLayout";
createInertiaApp({
resolve: (name) => {
let page = require(`./Pages/${name}`).default;
page.layout ??= Layout;
return page;
},
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.component("Link", Link)
.component("Head", Head)
.mount(el);
},
});
InertiaProgress.init();
and this Is what the website renders:
<div class="text-xl"> This is a super simple webpage <p></p></div>
Level 4
@tykus I have checked the vue devtools and the prop doesn't show up....
the typo is just in this forumpost, but not in the code :((
Level 104
the typo is just in this forumpost, but not in the code :((
I guessed as much; but, you'd never know...
Any console errors/warnings?
Level 4
@tykus I have a small one stating that:
DevTools failed to load source map: Could not load content for http://blog.test/js/index.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
in chrome, safari says: [Error] Failed to load resource: the server responded with a status of 404 (Not Found) (index.js.map, line 0)
Level 1
@emil_aa Did you find the solution?
Level 1
The error "property was accessed during render but is not defined on instance" means that you are trying to access a property on a Vue instance that does not exist. This can happen for a number of reasons, such as:
- You have misspelled the property name.
- You have not defined the property in the data option for the Vue instance.
- You are trying to access the property on a child component, but you have not passed the property down to the child component.
To fix this error, you need to identify the reason why the property is not defined and then take the appropriate action. For example, if you have misspelled the property name, you need to correct the spelling. If you have not defined the property in the data option, you need to add the property to the data option. And if you are trying to access the property on a child component, you need to pass the property down to the child component.
Please or to participate in this conversation.