13
VueJSコンポーネントを使用してスクリプトをクリーンアップしたいと考えています。したがって、私はLaravelにロードする各ページのコンポーネントを持っています。これまではすべてうまく動作します。しかし、私は現在のスクリプトロジックをコンポーネントに移す際に問題があります。私のためのキーがwindow.app = new Vue...一部ですVueJSコンポーネント
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);
},
}
(...)
}
：
これは、使用するコンポーネントをインポートする現在のスクリプトの設定です。私はGoogleマップを利用しているので、ページが読み込まれるとapp.initメソッドが検索されます。 （私はそれぞれのVueでのモジュールの作成）
<!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>
個々のページ
は次のようになります。：@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の負荷が引き続き機能するようにコンポーネントを変更するにはどうすればよいですか？
はい。私はGoogle Mapsスクリプトをインポートして、スクリプトのwindow.app.initコールを介してページロード時にinitメソッドをロードするように指示します。私はinit（）メソッドを追加しましたが、これは偶然では表示されませんでしたが、既存のものであり、地図に関連するすべてのものを完全に細かくロードします。すべてのメソッドは生きており、メソッドキー内で作業しています。目標はコードをリファクタリングすることです。ロードされる「メイン」ページにマップビューが含まれているため、このページに必要なすべての要素だけを含むコンポーネントを作成します。別のページには異なるコンテンツがあり、そこにさまざまな方法を使いたいと思います。 – sesc360
app.initはコンポーネントの一部ではありません。これらは現時点で説明されているように見えます。実際には、 'window.app = new Vue'という表現は、コンポーネントを適切に使う方法の面で私に頭痛を与えています。そのため、Googleマップスクリプトがロードされると、正しいinitメソッドが見つけられます。 – sesc360
これを構造化したのは、GoogleマップをスタンドアロンのJSサービスとしてセットアップすることです。これは、Vue自体によって呼び出され、おそらくcreated（）ライフサイクルコールバックで呼び出されます。あなたはこのように調整をより良くコントロールできます。これを行う必要はありませんが、それ以外の場合は、マップからvueへのコールバックが行われる前に、Vueコンポーネントが利用できるようにすべてのタイミングを調整する必要があります。 Vueのcreated（）およびready（）ライフサイクルコールバックのコンソールへのメモのロギングを提案し、Googleマップで同じことを行い、vueより前にマップが用意されているかどうかを確認します。 –