Установил Laravel 8, Jetstream.
app.js:
import Vue from 'vue';
import { InertiaApp } from '@inertiajs/inertia-vue';
import { InertiaForm } from 'laravel-jetstream';
import PortalVue from 'portal-vue';
Vue.mixin({ methods: { route } });
Vue.use(InertiaApp);
Vue.use(InertiaForm);
Vue.use(PortalVue);
const app = document.getElementById('app');
new Vue({
render: (h) =>
h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: name => import(`@/Pages/${name}`).then(module => module.default),
},
}),
}).$mount(app);
Dashboard.vue:
<template>
<app-layout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Dashboard
</h2>
</template>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<welcome />
</div>
</div>
</div>
</app-layout>
</template>
<script>
import AppLayout from '@/Layouts/AppLayout'
import Welcome from '@/Jetstream/Welcome'
export default {
mounted: console.log(this),
components: {
AppLayout,
Welcome,
},
}
</script>
Консоль в браузере:
undefined
app.js:4301 [Vue warn]: Error in render: "TypeError: Cannot read property 'profile_photo_url' of undefined"
found in
---> <AppLayout> at resources/js/Layouts/AppLayout.vue
<Dashboard> at resources/js/Pages/Dashboard.vue
<Inertia>
<Root>
warn @ app.js:4301
app.js:5564 TypeError: Cannot read property 'profile_photo_url' of undefined
at Proxy.render (2.js:1240)
at VueComponent.Vue._render (app.js:7218)
at VueComponent.updateComponent (app.js:7734)
at Watcher.get (app.js:8145)
at new Watcher (app.js:8134)
at mountComponent (app.js:7741)
at VueComponent../node_modules/vue/dist/vue.common.dev.js.Vue.$mount (app.js:12711)
at VueComponent../node_modules/vue/dist/vue.common.dev.js.Vue.$mount (app.js:15611)
at init (app.js:6792)
at createComponent (app.js:9640)
В app.blade @inertia присутствует
Лара свежеустановленная. Ничего не могу понять, вывел в компонент mounted: console.log(this),
в консоле как видите undefined
т.е. в компонент вообще ничего не передаётся. Никак не могу понять как это исправить.
в app.js в resolveComponent пробовал по разному:
resolveComponent: (name) => require('./Pages/${name}').default,
resolveComponent: (name) => require('./Pages/${name}').default,
resolveComponent: name => import('@/Pages/${name}').then(module => module.default),
ничего не помогает.