我想使用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);
},}
(...)
}
key.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>
@extends('app',['vueView' => 'home-view'])
@section('page_title','title')
@section('page_description','title')
@section('content')
content
@endsection
通过定义vueView变量,使用我在脚本中导入的正确模块.
目标是使用HomeView组件作为主要的Google地图视图.而在我主题中点击相应的链接时加载的不同页面的其他组件.最后,我不想在一个脚本中拥有所有的VueJS代码.所以模型.
当我传输这个当前JS文件的所有内容时,我收到一个错误,抱怨app.init不是一个功能.组件看起来像这样：
<script>
export default {
data: {
// SEARCH
addressComponents: '',autocompletePlace: '',autocompleteAddress: '',(...)
}
解决方法
有人已经提到了
GuillaumeLeclerc/vue-google-maps在npm上可以使用vue-google-maps,但是应该警告该版本仅适用于vue 1.x
如果您使用v2,请查看这个伟大的vue2 fork xkjyeah/vue-google-maps – 它可以在npm上使用vue2-google-maps.
API非常简单,并不远离v1版本,并且存储库比其上传对象更加活跃.
这真的使我的vue地图工作比滚动我自己更加无痛,这是我最初做的.
我希望有帮助