ses*_*360 14 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加载仍然有效？
也许您应该使用或至少研究代码来执行该操作.
例如,您可以在Github上查看vue-google-maps:https://github.com/GuillaumeLeclerc/vue-google-maps/
它定义了许多与Google地图相关的组件.
有人已经提到了GuillaumeLeclerc/vue-google-maps,它们在npm上可用vue-google-maps,但是要注意该版本仅适用于vue 1.x
如果您使用的是v2,请查看这个很棒的vue2 fork xkjyeah/vue-google-maps - 它可以vue2-google-maps在npm上使用.
API非常简单,并且与v1版本相差甚远,而且存储库比其上层版本更加活跃.
这真的让我的vue map工作比滚动我自己更轻松,这就是我最初做的事情.
我希望有所帮助
| 归档时间： |
|
| 查看次数： |
3233 次 |
| 最近记录： |