14

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...部分です。私は 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 コードを 1 つのスクリプトに含めたくありません。したがって、モデル。

この現在の JS ファイルのすべてのコンテンツを転送するとapp.init、関数ではないというエラーが表示されます。コンポーネントは次のようになります。

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

app.init ロードが機能するようにコンポーネントを変更するにはどうすればよいですか?

4

3 に答える 3

7

おそらく、それを行うパッケージを使用するか、少なくともコードを研究する必要があります。

たとえば、Github でvue-google-mapsを確認できます: https://github.com/GuillaumeLeclerc/vue-google-maps/

これは、Google マップに関連する多数のコンポーネントを定義します。

于 2016-05-10T15:52:16.817 に答える
7

誰かがすでにnpm で利用可能なGuillaumeLeclerc/vue-google-mapsvue-google-mapsについて言及していますが、そのバージョンは vue 1.x でのみ動作することに注意してください。

v2 を使用している場合は、この素晴らしい vue2 フォークxkjyeah/vue-google-mapsを見てください。npmで利用できますvue2-google-maps。

API は単純で、v1 バージョンから大きく逸脱することはありません。また、リポジトリは上流のバージョンよりもはるかにアクティブです。

それは本当に私の vue マップの作業を、私が最初に行っていた自分自身のロールよりもはるかに簡単にしました。

それが役立つことを願っています

于 2016-11-28T22:14:41.417 に答える