我想使用 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 方法。这是我在 Blade 模板中加载的脚本的一部分:
<!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 组件作为主要的谷歌地图 View 。以及我在单击主题中的相应链接时加载的不同页面的其他组件。最后，我不想在一个脚本中包含所有 VueJS 代码。因此模型。
当我传输当前 JS 文件的所有内容时，我收到一个错误，提示 app.init 不是一个函数。该组件如下所示:
<script>
export default {
data: {
// SEARCH
addressComponents: '',
autocompletePlace: '',
autocompleteAddress: '',
(...)
}
如何以某种方式修改我的组件，使 app.init 加载仍然有效？
最佳答案
有人已经提到GuillaumeLeclerc/vue-google-maps在 npm 上作为 vue-google-maps 可用，但请注意该版本仅适用于 vue 1.x
如果您使用的是 v2，请查看这个很棒的 vue2 分支 xkjyeah/vue-google-maps - 它在 npm 上以 vue2-google-maps 的形式提供。
API 简单明了，与 v1 版本相差无几，而且存储库比其上游对应版本活跃得多。
这确实让我的 vue map 工作起来比滚动我自己的 map 更轻松，这是我最初所做的。
希望对你有帮助
关于javascript - VueJS 组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37142265/