Vue:属性或方法 "APP" 不是在实例上定义的，而是在渲染过程中引用的

我正在修补我的第一个laravel-vue应用程序，遇到了一个问题，首先是一些上下文。

为了从 laravel 共享我的全局应用程序数据以查看，我使用如下内联脚本：我使用 laravel 的应用服务提供商与我的视图共享全局数据，每次请求时都会重新获取此数据：

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://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <MainHeader> at resources/assets/js/components/headers/MainHeader.vue
<Root>

这是我的主头组件：

<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>

我被困在这里了！

首先，如果你想与 vue 共享 laravel 数据.js 当然，我更喜欢使用 PHP 库和作曲家视图。 https://learninglaravel.net/transform-php-vars-to-javascript

要共享您在此处拥有的此类数据，您可以在两个方向之间进行选择：

从 API 获取数据(使用 GET 构建特定数据的路由(，并在 VUE 中使用 AXIOS 从后端获取数据
与作曲家共享视图

您的方法类似于作曲家的观点，但不是理想的:)在这里阅读：https://laravel.com/docs/5.7/views#view-composers 更多关于这一点的信息。

如果选择"组合器视图"，请确保将数据提供给仅此路由需要的视图。如果您不使用它，请不要发送所有内容。

对于我的私有，最好的选择是，如果您仅与 composerViews 共享所需的数据作为用户信息，其余数据来自后端的每个组件的 AXIOS，并带有漂亮的加载器。

不过，如果您想为您的结构找到解决方案，请查看您是否正在将这些数据与window.APP匹配，但在组件中您正在使用APP.{name}.APP不是为本地目的定义的，您需要使用window.APP.{name}

相关内容

最新更新

热门标签：