如何在vue.js＆amp;中使用模板内的模板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>