我正在修改我的第一个laravel-vue应用程序,但首先遇到了一些问题。
为了从laravel共享我的全局应用程序数据以查看,我使用一个内联脚本,如下所示: 我使用laravel的AppServiceProvider与我的视图共享全局数据,对于将重新获取此数据的每个请求,afaik:
public function boot()
{
View::composer('*', function ($view) {
$globals = [
'appName' => Globals::where('name', 'Nombre de la aplicación')->pluck('value')->first(),
'appDescription' => Globals::where('name', 'Descripcion de la aplicación')->pluck('value')->first(),
'appBio' => Globals::where('name', 'Biografia de la aplicacion')->pluck('value')->first(),
'appBookingPhone' => Globals::where('name', 'Télefono de contacto')->pluck('value')->first(),
'appPrefixBookingPhone' => Globals::where('name', 'Teléfono para mostrar')->pluck('value')->first(),
'appMail' => Globals::where('name', 'Email de contacto')->pluck('value')->first(),
'appFullAddress' => Globals::where('name', 'Dirección completa')->pluck('value')->first(),
'appZipAddress' => Globals::where('name', 'Contador de visitas')->pluck('int_value')->first(),
'appSchedules' => $schedules = Schedule::all(),
'appTwitter' => config('globals.twitter'),
'appFacebook' => config('globals.facebook'),
'appInstagram' => config('globals.instagram'),
'appShowNewsletterModal' => Modal::checkIfShowModal(),
'appAllClassesPosts' => Post::withCategory('Clases')->take(10)->get(),
'appAllBehaviourPosts' => Post::withCategory('Conducta canina')->take(10)->get(),
'appAllTrainingPosts' => Post::withCategory('Formación')->take(10)->get(),
'appLoggedUser' => Auth::user(),
'appSchedules' => $schedules = Schedule::all()
];
//dd($globals['appAllBehaviourPosts']);
$view->with('globals', $globals);
});
}
然后,我在刀片模板中使用内联脚本与vue的实例共享数据:
<script>
window.APP = @json( ["pageInfo" => $pageInfo, "globals" => $globals] );
</script>
然后在MainHeader组件内部,我尝试访问APP变量,但出现以下错误:
[Vue warn]: Property or method "APP" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <MainHeader> at resources/assets/js/components/headers/MainHeader.vue
<Root>
这是我的MainHeader组件:
<template>
<header class="header_maincontainer">
<div class="header_small_container">
<div class="header_small_contact_container" style="">
<span class="header_small_text1">Llamanos al: </span>
<i class="header_small_phone_icon fa fa-phone"></i>
<a class="header_small_phone_number" :href="'tel:${APP.globals.appPrefixedBookingPhone}'">{{ APP.globals.appBookingPhone }}</a>
</div>
<div class="header_small_social_container" style="">
<a v-if="APP.globals.twitter != ''" :href="'${APP.globals.twitter}'" target="_blank" class="header_small_social_icon"><i class="fa fa-twitter header_fa"></i></a>
<a v-if="APP.globals.facebook != ''" :href="'${APP.globals.facebook}'" target="_blank" class="header_small_social_icon"><i class="fa fa-facebook header_fa"></i></a>
<a v-if="APP.globals.instagram != ''" :href="'${APP.globals.instagram}'" target="_blank" class="header_small_social_icon"><i class="fa fa-instagram header_fa"></i></a>
</div>
<a class="header_small_auth_container" href="/login" v-if="APP.globals.user == ''">
<div class="header_small_login_icon"><i class="fa fa-user header_fa"></i></div>
<span class="header_small_login_text" title="Iniciar sesión">Iniciar</span>
</a>
<div class="header_small_auth_container" v-if="APP.globals.user != ''">
<a href="/panel-administrador" class="header_small_mail_icon"><i class="fa fa-cog header_fa"></i></a>
<a href="" class="header_small_login_icon"><i class="fa fa-sign-out header_fa"></i></a>
<a href="/logout" class="header_small_login_text" title="Cerrar sesión">Salir</a>
</div>
</div>
<div class="header_big_container">
<div class="header_big_logo_container">
<a class="header_big_logo_link_wrapper" href="/" title="'Página de inicio de ${APP.globals.appBookingPhone}'" style="background-image:url('/img/logo_yellow.png');"></a>
</div>
<div class="header_big_texts_container">
<span class="header_big_texts_3">Adiestramiento Canino a Domicilio en Málaga, Costa de Málaga e Interiores</span>
<span class="header_big_texts_2">Tus especialistas en comportamiento canino</span>
<a class="header_big_texts_phone" :href="'tel:${APP.globals.appPrefixedBookingPhone}'">{{ APP.globals.appBookingPhone }}</a>
</div>
</div>
</header>
</template>
我被困在这里!
答案 0 :(得分:0)
首先,如果您想与vue.js共享laravel数据,那么我当然更喜欢使用PHP库和composer视图。 https://learninglaravel.net/transform-php-vars-to-javascript
要在此处共享此类数据,可以在两个方向之间进行选择:
您的方法类似于作曲家的观点,但不理想:)请在此处阅读:https://laravel.com/docs/5.7/views#view-composers,以了解更多信息。
如果您选择composerViews,请确保将数据提供给该路线仅需要的视图。如果不使用,则不要发送所有内容。
对于我来说,私有的最佳选择是,如果您仅与composerViews共享所需的数据作为用户信息,而其余的数据则通过AXIOS从后端的每个组件上通过漂亮的加载器获得。
不过,如果要查找结构的解决方案,请确保您将此数据与window.APP
匹配,但是在组件中您正在使用APP.{name}
。 APP
并非出于本地目的而定义,您需要使用window.APP.{name}