Desidero utilizzare i componenti VueJS per pulire i miei script. Quindi ho un componente per ogni pagina che sto caricando in Laravel. Tutto funziona bene finora. Ma ho problemi nel trasferire la mia logica di script corrente a un componente.Componenti VueJS
Questa è la configurazione script corrente importazione dei componenti da utilizzare:
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);
},
}
(...)
}
chiave per me è la parte window.app = new Vue.... Uso google maps e quindi quando la pagina viene caricata cerca un metodo app.init. Questo fa parte dello script che sto caricando all'interno del modello lama:
<!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>
Le singole pagine (dove creo per ciascun modulo in Vue) simile a questa:
@extends('app', ['vueView' => 'home-view'])
@section('page_title', 'title')
@section('page_description', 'title')
@section('content')
content
@endsection
Definendo il vueView variabile, viene utilizzato il modulo corretto che sto importando nel mio script.
L'obiettivo è utilizzare il componente HomeView come visualizzazione principale di Google Maps. E gli altri componenti per pagine diverse che carico quando clicco sul link corrispondente nel mio tema. Alla fine, non voglio avere tutto il codice VueJS in uno script. Quindi i modelli.
Quando trasferisco tutto il contenuto di questo file JS corrente, viene visualizzato un errore in cui si lamenta che lo app.init non è una funzione. Il componente si presenta così:
<script>
export default {
data: {
// SEARCH
addressComponents: '',
autocompletePlace: '',
autocompleteAddress: '',
(...)
}
Come faccio a modificare la mia componente in un modo, che il carico app.init sarebbe ancora lavorare?
Sì. Sto importando lo script di Google Maps e gli dico di caricare il metodo init sul caricamento della pagina tramite la chiamata a window.app.init nello script. Ho aggiunto il metodo init() che non è stato mostrato per caso, ma è esistente e carica perfettamente tutto ciò che riguarda la mappa. Tutti i metodi sono vivi e funzionano all'interno della chiave del metodo. L'obiettivo è ora di rifattorizzare il codice e dato che la pagina "principale" che viene caricata contiene la vista mappa, voglio creare il componente che contiene solo tutto il materiale necessario per questa pagina. Un'altra pagina avrà contenuti diversi e io voglio usare metodi diversi lì. – sesc360
L'app.init non fa parte dei componenti. Questi sono solo come descritti al momento. In realtà l'espressione 'window.app = new Vue' mi sta dando il mal di testa in termini di come utilizzare i componenti correttamente, quindi quando viene caricato lo script di google maps, trova il giusto metodo di init. – sesc360
Così come avrei strutturato questo è quello di impostare le mappe di Google come un servizio JS stand-alone, che viene chiamato da Vue stesso, possibilmente nel suo callback del ciclo di vita creato(). Hai un migliore controllo sul coordinamento in questo modo. Non devi farlo, ma altrimenti dovrai coordinare i tempi di tutto ciò in modo tale che il componente Vue sia disponibile prima che venga effettuata la richiamata dalle mappe alla vue. Suggerisci di registrare una nota per la console nei callback del ciclo di vita creati() e ready() di Vue e fare lo stesso in google maps per vedere se le tue mappe sono pronte prima della tua vue. –