Как использовать шаблон внутри шаблона с помощью vue.js и laravel?

В моем проекте я использую эликсир laravel для смешивания файлов JavaScript.

В формах я должен использовать основной элемент Vue.js для создания форм. Также мне нужно использовать шаблон vue-google-map внутри родительского элемента Vue.js, но он показывает ошибку?

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 и другой шаблон для карт Google

[Предупреждение Vue]: Неизвестный пользовательский элемент: <gmap-map> - Вы правильно зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите параметр «имя».

[Предупреждение Vue]: Неизвестный пользовательский элемент: <gmap-info-window> - Вы правильно зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите параметр «имя».


vue.js vuejs2 vue-component laravel-5.4 laravel-elixir
person Gobi R    schedule 20.03.2018    source источник
comment
как насчет того, чтобы показать свой код?   -  person Michael Oshosanya    schedule 20.03.2018
comment
JS: 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>   -  person Gobi R    schedule 20.03.2018
comment
@OshosanyaMichael   -  person Gobi R    schedule 20.03.2018

Ответы (1)


arrow_upward
0
arrow_downward

Вы просто объявляете плагин. Вы должны "использовать" его, чтобы Vue знал о Это.

Кроме того, это <template> не имеет смысла, оно вам не нужно.

Вот как должно быть:

В коде JavaScript активируйте плагин через _2 _ :

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>
person acdcjunior    schedule 20.03.2018
comment
Спасибо. ошибки консоли удалены, но карта не отображается <iframe frameborder="0" src="about:blank" style="z-index: -1; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; border: none;"></iframe> - person Gobi R; 21.03.2018
comment
Дважды проверьте объявление карты, ключ API и версию. Теперь это действительно должно сработать. - person acdcjunior; 21.03.2018
comment
Как прошло ? - person acdcjunior; 27.03.2018