VueJS组件

时间:2016-05-10 15:01:10

标签: javascript laravel vue.js vuejs2

我想利用VueJS组件来清理我的脚本。因此,我为Laravel加载的每个页面都有一个组件。到目前为止一切正常。但我有问题将我当前的脚本逻辑转移到组件。

这是导入要使用的组件的当前脚本设置:

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...部分。我使用谷歌地图,因此当页面加载时,它搜索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组件作为主要谷歌地图视图。点击我主题中的相应链接时,我加载了不同页面的其他组件。最后,我不希望在一个脚本中包含所有VueJS代码。因此模型。

当我转移当前这个JS文件的所有内容时,我收到一个错误,抱怨app.init不是函数。该组件如下所示:

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

如何以某种方式修改我的组件,app.init加载仍然有效?

3 个答案:

答案 0 :(得分:7)

也许您应该使用或至少研究代码来执行此操作。

例如,您可以在Github上查看 vue-google-maps https://github.com/GuillaumeLeclerc/vue-google-maps/

它定义了许多与Google地图相关的组件。

答案 1 :(得分:7)

有人已经提到GuillaumeLeclerc/vue-google-maps在{n}上可用作vue-google-maps,但请注意,该版本仅适用于vue 1.x

如果您使用的是v2,请查看这个很棒的vue2前叉xkjyeah/vue-google-maps - 它在npm上以vue2-google-maps的形式提供。

API非常简单,与v1版本相差甚远,而且存储库比其上游版本更加活跃。

这真的让我的vue地图比滚动我自己更轻松,这是我最初做的事情。

我希望有帮助

答案 2 :(得分:1)

如果我理解你,你有一个Google Maps脚本,加载后会调用window.app.init,对吧?

你的Vue组件是否有init()方法(上面没有显示)?如果有一个,则需要在app.methods.init()中记住VueJS,标准可调用方法存在于方法键下。

或者:您没有提及您的app.init是否属于Vue组件。如果不是因为您正在重新定义window.app作为您的vue组件,那么您的app.init函数将被覆盖。

最后,如果你的init是Vue的一部分,你的谷歌地图fn回调在加载Vue之前调用这个init(),因此还没有这样的方法吗?