提示:属性或方法“ APP”未在实例上定义,但在渲染期间被引用

时间:2018-10-25 12:07:07

标签: javascript php laravel vue.js

我正在修改我的第一个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>

我被困在这里!

1 个答案:

答案 0 :(得分:0)

首先,如果您想与vue.js共享laravel数据,那么我当然更喜欢使用PHP库和composer视图。 https://learninglaravel.net/transform-php-vars-to-javascript


要在此处共享此类数据,可以在两个方向之间进行选择:

  • 从API获取数据(使用GET建立特定数据的路由),并在VUE中使用AXIOS从后端获取数据
  • 与composerViews共享

您的方法类似于作曲家的观点,但不理想:)请在此处阅读:https://laravel.com/docs/5.7/views#view-composers,以了解更多信息。

如果您选择composerViews,请确保将数据提供给该路线仅需要的视图。如果不使用,则不要发送所有内容。

对于我来说,私有的最佳选择是,如果您仅与composerViews共享所需的数据作为用户信息,而其余的数据则通过AXIOS从后端的每个组件上通过漂亮的加载器获得。


不过,如果要查找结构的解决方案,请确保您将此数据与window.APP匹配,但是在组件中您正在使用APP.{name}APP并非出于本地目的而定义,您需要使用window.APP.{name}