Вложенные компоненты Vue.js

1011

30 января 2017, 19:35

Подскажите что я делаю не так:

src/app.js:

    let $ = require('./bower_components/jquery/dist/jquery.min');
    import Vue from './bower_components/vue/dist/vue.min';
    let modal = require('./modal'); 
    modal.component(Vue);
    Vue.component('comp', {
        template: '<div >\
                    <modal></modal>\
                    </div>',
        data: function () {
        },
        methods: {}
    });
    let app = new Vue({
       el: '#app'
    });

src/modal:

module.exports.component = function (Vue) {
    Vue.component({
        element:'modal',
        template: '<div v-bind:id="modalId" class="modal">' +
                    '<div class="modal-content"></div>'+
                        '<h4>{{modal-header}}</h4>' +
                    '</div>',
        data:function(){
            return{
                'modal-header':'Modal header',
                modalId:'modal'
            }
        },
        mounted: function () {
        }
    });
};

Модальное окно не рендерится

Answer 1

Ошибка в синтаксисе:

Vue.component('modal',{
    template: '<div v-bind:id="modalId" class="modal">' +
                '<div class="modal-content"></div>'+
                    '<h4>{{modal-header}}</h4>' +
                '</div>',
    data:function(){
        return{
            'modal-header':'Modal header',
            modalId:'modal'
        }
    },
    mounted: function () {
    }
});