Quiero hacer uso de los componentes VueJS para limpiar mis scripts. Por lo tanto, tengo un componente para cada página que estoy cargando en Laravel. Todo funciona bien hasta ahora. Pero tengo problemas para transferir mi lógica de script actual a un componente.

Esta es la configuración actual del script que importa los componentes que se utilizarán:

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);
      },
    }
(...)
}

La clave para mí es la parte window.app = new Vue.... Hago uso de google maps y, por lo tanto, cuando se carga la página, busca un método app.init. Esto es parte del script que estoy cargando dentro de la plantilla de la hoja:

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

Las páginas individuales (donde creo para cada módulo en Vue) se ven así:

@extends('app', ['vueView' => 'home-view'])
@section('page_title', 'title')
@section('page_description', 'title')

@section('content')
content
@endsection

Al definir la variable vueView, se utiliza el módulo correcto que estoy importando en mi script.

El objetivo es utilizar el componente HomeView como la vista principal de Google Maps. Y los otros componentes para diferentes páginas que cargo al hacer clic en el enlace correspondiente en mi tema. Al final, no quiero tener todo el código VueJS en un script. Por eso los modelos.

Cuando transfiero todo el contenido de este archivo JS actual, aparece un error quejándose de que app.init no es una función. El componente se ve así:

<script>
export default {
   data: {
       // SEARCH
       addressComponents: '',
       autocompletePlace: '',
       autocompleteAddress: '',
(...)
}

¿Cómo modifico mi componente de manera que la carga de app.init todavía funcione?

14
sesc360 10 may. 2016 a las 18:01

4 respuestas

La mejor respuesta

Alguien ya ha mencionado GuillaumeLeclerc / vue-google-maps que está disponible en npm como {{ X0}}, pero ten en cuenta que esa versión solo funciona con vue 1.x

Si está utilizando v2, mire esta gran bifurcación vue2 xkjyeah / vue-google-maps - está disponible como vue2-google-maps en npm.

La API es sencilla y no difiere mucho de la versión v1, y el repositorio es mucho más activo que su contraparte ascendente.

Realmente hizo que mi mapa vue funcionara mucho más fácil que rodar el mío, que es lo que estaba haciendo inicialmente.

Espero que eso ayude

7
darryn.ten 28 nov. 2016 a las 22:14

Si te entiendo bien, tienes un script de Google Maps que, cuando se carga, llama a window.app.init, ¿verdad?

¿Su componente Vue tiene un método init () (ninguno se muestra arriba)? Si hubiera uno, tendría que estar en app.methods.init () recuerde para VueJS, los métodos invocables estándar viven bajo la clave de métodos.

Alternativamente: no menciona si su app.init es parte del componente Vue o no. Si no es así, parecería que su función app.init se está anulando porque está redefiniendo window.app como su componente vue.

Por último, si su init es parte de Vue, ¿su devolución de llamada de Google Maps fn llama a este init () antes de que se cargue el Vue y, por lo tanto, no existe tal método (todavía)?

1
Tremendus Apps 10 may. 2016 a las 15:30

Este es el ejemplo completo de componente en cada llamada de componente desde una carpeta común y también pasa datos a la forma de matriz dataList para una mayor ejecución

 <template>
   <v-content>
      <v-container fluid>
        <AdminOverView :dataList="dataList"></AdminOverView>
        <BDMOverView :dataList="dataList"  ></BDMOverView>
        <BDEOverView :dataList="dataList" ></BDEOverView>
        <TeleSaleOverView :dataList="dataList"></TeleSaleOverView>
        <AccountantOverView :dataList="dataList" > 
    </AccountantOverView>
    </v-container> 
  </v-content>
</template>

<script>
 import AdminOverView from "./../common/AdminOverView";
 import BDMOverView from "./../common/BDMOverView";
 import BDEOverView from "./../common/BDEOverView";
 import TeleSaleOverView from "./../common/TeleSaleOverView";
 import AccountantOverView from "./../common/AccountantOverView";
export default 
 {
components: 
   {
    AdminOverView,
    BDMOverView,
    BDEOverView ,
    TeleSaleOverView,
    AccountantOverView,
  },
data: () => ({
      dataList:[
        {
        name: 'Frozen Yogurt',
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
        iron: '1%',
      },
      {
        name: 'Ice cream sandwich',
        calories: 237,
        fat: 9.0,
        carbs: 37,
        protein: 4.3,
        iron: '1%',
      },
      {
        name: 'Eclair',
        calories: 262,
        fat: 16.0,
        carbs: 23,
        protein: 6.0,
        iron: '7%',
      },
      {
        name: 'Cupcake',
        calories: 305,
        fat: 3.7,
        carbs: 67,
        protein: 4.3,
        iron: '8%',
      },
      {
        name: 'Gingerbread',
        calories: 356,
        fat: 16.0,
        carbs: 49,
        protein: 3.9,
        iron: '16%',
      },
      {
        name: 'Jelly bean',
        calories: 375,
        fat: 0.0,
        carbs: 94,
        protein: 0.0,
        iron: '0%',
      },
      {
        name: 'Lollipop',
        calories: 392,
        fat: 0.2,
        carbs: 98,
        protein: 0,
        iron: '2%',
      },
      {
        name: 'Honeycomb',
        calories: 408,
        fat: 3.2,
        carbs: 87,
        protein: 6.5,
        iron: '45%',
      },
      {
        name: 'Donut',
        calories: 452,
        fat: 25.0,
        carbs: 51,
        protein: 4.9,
        iron: '22%',
      },
      {
        name: 'KitKat',
        calories: 518,
        fat: 26.0,
        carbs: 65,
        protein: 7,
        iron: '6%',
      },
       ]
       })
}
0
zia khan 24 ene. 2020 a las 19:02

Tal vez debería usar, o al menos estudiar el código, de un paquete que lo haga.

Por ejemplo, puede consultar vue-google-maps en Github: https : //github.com/GuillaumeLeclerc/vue-google-maps/

Define una gran cantidad de componentes relacionados con Google Maps.

7
Didier Sampaolo 10 may. 2016 a las 15:52