Я хочу использовать компоненты VueJS для очистки моих скриптов. Поэтому у меня есть компонент для каждой страницы, которую я загружаю в Laravel. Пока все работает нормально. Но у меня есть проблемы с переносом моей текущей логики сценария на компонент.Компоненты VueJS
Это текущая настройка сценария импорта, которые будут использоваться компоненты:
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. Это часть сценария я ЗАГРУЗКА в шаблоне лезвия:
<!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 переменная, используется правильный модуль, который я импортирую в свой скрипт.
Цель состоит в том, чтобы использовать компонент HomeView в качестве основного вида карт Google. И другие компоненты для разных страниц загружаются при нажатии соответствующей ссылки в моей теме. В конце концов, я не хочу, чтобы весь код VueJS был в одном скрипте. Поэтому модели.
Когда я передаю все содержимое этого текущего файла JS, у меня возникает ошибка, так как app.init не является функцией. Компонент выглядит следующим образом:
<script>
export default {
data: {
// SEARCH
addressComponents: '',
autocompletePlace: '',
autocompleteAddress: '',
(...)
}
Как изменить свой компонент таким образом, что нагрузка app.init будет по-прежнему работать?
Да. Я импортирую скрипт Google Maps и скажу ему загрузить метод init при загрузке страницы через вызов window.app.init в скрипте. Я добавил метод init(), который не был показан случайно, но существует и прекрасно загружает все, что связано с картой. Все методы живут и работают в ключе метода. Теперь цель состоит в том, чтобы реорганизовать код, и поскольку загружаемая «основная» страница содержит представление карты, я хочу создать компонент, который содержит только все необходимое для этой страницы. Другая страница будет иметь различный контент, и я хочу использовать там разные методы. – sesc360
Приложение не входит в состав компонентов. Они просто выглядят так, как описано на данный момент. Фактически выражение 'window.app = new Vue' дает мне головную боль с точки зрения того, как я правильно использую компоненты, поэтому, когда загружается скрипт Google Maps, он находит правильный метод init. – sesc360
Итак, как бы я это сделал, это настроить карты Google как автономную службу JS, которая вызывается самим Vue, возможно, в его обратном вызове lifecycle created(). Таким образом, вы лучше контролируете координацию. Вам не обязательно это делать, но в противном случае вам нужно будет согласовать время всего, что компонент Vue доступен до того, как будет сделан обратный вызов из карт в vue. Предложите записать примечание на консоль в обратные вызовы жизненного цикла Vue() и ready() и сделать то же самое на картах google, чтобы узнать, готовы ли ваши карты перед vue. –