Ich möchte VueJS Komponenten verwenden, um meine Skripte zu bereinigen. Deshalb habe ich für jede Seite, die ich in Laravel einlade, eine Komponente. Bis jetzt funktioniert alles gut. Aber ich habe Probleme, meine aktuelle Skriptlogik auf eine Komponente zu übertragen.VueJS Komponenten
Dies ist der aktuelle Import Skript-Setup der verwendeten Komponenten werden:
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);
},
}
(...)
}
Schlüssel für mich ist der window.app = new Vue... Teil. Ich benutze Google Maps und suche daher beim Laden der Seite nach einer app.init-Methode. Dies ist Teil des Skripts ich in der Klinge Vorlage bin Laden:
<!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>
Die einzelnen Seiten (wo ich für jeweils ein Modul in Vue erstellen) wie folgt aussehen:
@extends('app', ['vueView' => 'home-view'])
@section('page_title', 'title')
@section('page_description', 'title')
@section('content')
content
@endsection
Durch die Definition der vueView Variable, das richtige Modul, das ich in meinem Skript importiere, wird verwendet.
Das Ziel ist es, HomeView Komponente als die Hauptansicht von Google Maps zu verwenden. Und die anderen Komponenten für verschiedene Seiten lade ich, wenn ich auf den entsprechenden Link in meinem Thema klicke. Am Ende möchte ich nicht den gesamten VueJS Code in einem Skript haben. Daher die Modelle.
Wenn ich den gesamten Inhalt dieser aktuellen JS-Datei übertrage, bekomme ich eine Fehlermeldung, dass keine Funktion ist. Die Komponente sieht wie folgt aus:
<script>
export default {
data: {
// SEARCH
addressComponents: '',
autocompletePlace: '',
autocompleteAddress: '',
(...)
}
Wie kann ich eine Komponente in einer Art und Weise ändern, dass die app.init Belastung noch funktionieren würde?
Ja. Ich importiere das Google Maps-Skript und fordere es auf, die init-Methode beim Laden der Seite über den window.app.init-Aufruf im Skript zu laden. Ich habe die Methode init() hinzugefügt, die nicht zufällig angezeigt wurde, aber existiert und lädt alles, was mit der Karte zu tun hat. Alle Methoden sind live und arbeiten innerhalb des Methodenschlüssels. Das Ziel ist nun, den Code zu refaktorieren, und da die "Haupt" -Seite, die geladen wird, die Kartenansicht enthält, möchte ich die Komponente erstellen, die nur all die Dinge enthält, die für diese Seite benötigt werden. Eine andere Seite wird einen anderen Inhalt haben und ich möchte dort verschiedene Methoden verwenden. – sesc360
Die App.init ist nicht Teil der Komponenten. Diese sehen gerade so aus, wie sie gerade beschrieben werden. Tatsächlich macht mir der Ausdruck 'window.app = new Vue' Kopfschmerzen, wenn ich die Komponenten richtig verwende. Wenn also das Google Maps-Skript geladen wird, findet es die richtige init-Methode. – sesc360
So, wie ich das strukturiert hätte, ist Google Maps als eigenständigen JS-Dienst einzurichten, der vom Vue selbst aufgerufen wird, möglicherweise in seinem erstellten() Lebenszyklus-Callback. Auf diese Weise haben Sie eine bessere Kontrolle über die Koordination. Sie müssen dies nicht tun, aber ansonsten müssen Sie das Timing von allem koordinieren, so dass die Vue-Komponente verfügbar ist, bevor der Rückruf von den Karten auf die Vue erfolgt. Vorschlagen Anmeldung eine Notiz in dem() erstellt und bereit() Lifecycle-Rückrufen des Vue zu trösten und gleicht in Google Maps zu tun, um zu sehen, ob Sie Ihre Karten vor Ihrer vue bereit sind. –