Vue.js problem z komponentami

0

Mam problem z działaniem komponentów, mianowicie nie do końca poprawnie generowane są one w końcowej aplikacji.
Komponent "drawer.vue" importuje "svgButton.vue", który jest używany w jego szablonie. I sam "drawer.vue" jest poprawnie wyświetlany, tylko svgButton jako komponent nie jest odpowiednio generowany.

drawer.vue:

<template>
    <div id="app-drawer" v-bind:class="{expanded: this.isOpen}">
        <div class="lazy-grid no-space">
            <div class="row"> </div>
            <div class="row">
                <v-svgbutton
                    button-id="toggleDrawer" 
                    d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"
                    width="2em"
                    height="2em"
                    toggleable="true"
                ></v-svgbutton>
            </div>
            <div class="row"> </div>
            <div id="app-drawer-fast-switches">
                <div class="row">
                    <v-svgbutton
                        button-id="sample_1" 
                        d="M3,3H11V5H3V3M13,3H21V5H13V3M3,7H11V9H3V7M13,7H21V9H13V7M3,11H11V13H3V11M13,11H21V13H13V11M3,15H11V17H3V15M13,15H21V17H13V15M3,19H11V21H3V19M13,19H21V21H13V19Z"
                        width="2em"
                        height="2em"
                        toggleable="true"
                    ></v-svgbutton>
                </div>
                <div class="row">
                    <v-svgbutton
                        button-id="return"
                        v-bind:class="{disabled: !canBackToShelf}"
                        d="M5,13L9,17L7.6,18.42L1.18,12L7.6,5.58L9,7L5,11H21V13H5M21,6V8H11V6H21M21,16V18H11V16H21Z"
                        width="2em"
                        height="2em"
                        toggleable="false"
                    ></v-svgbutton>             
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import svgButton from "./svgButton.vue";

export default {
    props: {
        canBackToShelf: true
    },
    data: function () {
        return {
            isOpen: false
        }
    },
    methods: {
        toggle() {
            this.isOpen = !this.isOpen;
        }
    },
    comments: {
        'v-svgbutton': svgButton
    }
}
</script>

w końcowej aplikacji dostaje dosłownie:

                <v-svgbutton
                    button-id="toggleDrawer" 
                    d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"
                    width="2em"
                    height="2em"
                    toggleable="true"
                ></v-svgbutton>

komponenty kompiluje przy użyciu "vueify" do .js (na samym dole wrzuciłem strukturę plików)

Użycie końcowe:

<!--  startup.html-->
<body>
    <div id="app-titlebar" style="margin: 0px; padding: 0px;"></div>
    <div id="app-drawer"></div>
</body>
<script>
    const Vue = require('vue/dist/vue.js');
    const drawer = require('./components/shared/drawer');

    var drawerV = new Vue({
        el: "#app-drawer",
        components: {
            drawer
        },
        render: h => h(drawer)
    });
</script>

struktura aplikacji:

ROOT/components
│   book-viewer.vue
│
└───shared
        drawer.vue
        search-bar.vue
        svgButton.vue

ROOT/views
│   startup.html
│
└───components
    │   book-viewer.js
    │
    └───shared
            drawer.js
            search-bar.js
            svgButton.js
0 
    comments: {
        'v-svgbutton': svgButton
    }

comments?

Poza tym nie mieszaj składni import z require oraz foo() z foo: function() (to pierwsze może powodować błędy w działaniu kodu, a drugie jest stylistycznie brzydkie).

1 użytkowników online, w tym zalogowanych: 0, gości: 1