如何使用 vue.js 和 laravel 在模板中使用模板？

Question

在我的项目中使用 laravel elixir 来混合 JavaScript 文件。

在表单中，我必须使用主 Vue.js 元素来创建表单。另外我必须在父 Vue.js 元素中使用 vue-google-map 模板，但它显示错误？

window.VueGoogleMaps = require('vue2-google-maps');
var app = new Vue({
    el: '#participantLocationListApp',
});

HTML：

<div class="panel panel-default card-view panel-refresh" id="participantLocationListApp">
    <template>
        <gmap-map:center="center" :zoom="1" style="width: 100%; height: 400px"> </gmap-map>
    </template>
</div>

错误：

[Vue 警告]：未知的自定义元素：<gmap-map> - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

[Vue 警告]：未知的自定义元素：<gmap-info-window> - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

Answer 1

您只是在声明插件。 You have to "use" it，所以 Vue 知道。

另外，<template> 毫无意义，你不希望它在那里。

应该是这样的：

在 JavaScript 代码中，激活插件through .use()：

var VueGoogleMaps = require('vue2-google-maps');

// from the docs: https://www.npmjs.com/package/vue2-google-maps#with-npm-recommended
Vue.use(VueGoogleMaps , {
  load: {
    key: 'YOUR_API_TOKEN',
    v: '3.26',                // Google Maps API version
    // libraries: 'places',   // If you want to use places input
  }
});

var app = new Vue({
    el: '#participantLocationListApp',
})

HTML（去掉<template>）：

<div class="panel panel-default card-view panel-refresh" id="participantLocationListApp">
    <gmap-map :center="center" :zoom="1" style="width: 100%; height: 400px"></gmap-map>
</div>