首页 文章

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

提问于
浏览 次
0

在我的项目中使用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.Element&anothe template for google-maps

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

vue.js vuejs2 laravel-5.4 vue-component laravel-elixir

1 回答

  • 0

    你只是声明插件 . 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>
    回复于

相关问题