Я хочу использовать компоненты VueJS для очистки моих скриптов. Поэтому у меня есть компонент для каждой страницы, которую я загружаю в Laravel. Пока все работает нормально. Но у меня проблемы с переносом текущей логики script на компонент.
Это текущая настройка script, импортирующая используемые компоненты:
main.js
import HomeView from './components/HomeView.vue';
import IncidentView from './components/IncidentView.vue';
window.app = new Vue({
el: '.content',
components: {
HomeView, IncidentView
},
methods: {
// Init GIS
init: function() {
// Initialize GIS Map
initGISMap(this.$els.map);
},
}
(...)
}
Ключ для меня - это часть window.app = new Vue.... Я использую карты Google, поэтому, когда страница загружается, он ищет метод app.init. Это часть script Я загружаю внутри шаблона клинка:
<!DOCTYPE html>
<html>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
<h1>
@yield('page_title')
<small>@yield('page_description')</small>
</h1>
</section>
<!-- Main content -->
<section class="content">
@if (isset($vueView))
<component is="{{ $vueView }}">
@endif
@yield('content')
</component>
</section>
<!-- /.content -->
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places&callback=app.init" async defer></script>
</body>
</html>
Отдельные страницы (где я создаю для каждого модуля в Vue) выглядят следующим образом:
@extends('app', ['vueView' => 'home-view'])
@section('page_title', 'title')
@section('page_description', 'title')
@section('content')
content
@endsection
Определяя переменную vueView, используется правильный модуль, который я импортирую в моем script.
Цель состоит в том, чтобы использовать компонент HomeView в качестве основного вида карт Google. И другие компоненты для разных страниц загружаются при нажатии соответствующей ссылки в моей теме. В конце я не хочу, чтобы весь код VueJS был в одном script. Поэтому модели.
Когда я переношу весь контент этого текущего JS файла, я получаю сообщение об ошибке, что app.init не является функцией. Компонент выглядит следующим образом:
<script>
export default {
data: {
// SEARCH
addressComponents: '',
autocompletePlace: '',
autocompleteAddress: '',
(...)
}
Как мне изменить свой компонент таким образом, что загрузка app.init все равно будет работать?
