Laravel 中的 CoreUI vue.js 模板无法正常工作

Question

我的问题是，laravel 中的 coreui 会渲染组件，但它们都不是交互式的。例如，当我使用 Tabs (CTabs) 时，它会正确显示，但我无法切换选项卡。

这是我加载 coreui 和组件的方式：

import CoreuiVue from '@coreui/vue';
Vue.use(CoreuiVue);

// Registering a single component
import { CSwitch, CButton, CTabs, CTab, CCarousel, CCarouselItem } from '@coreui/vue';

Vue.component('CTabs', CTabs)
Vue.component('CTab', CTab)
Vue.component('CCarousel', CCarousel)
Vue.component('CCarouselItem', CCarouselItem)




// globally
Vue.directive('c-emit-root-event', CEmitRootEvent)

export default {

        components: {
            CTabs, CTab, CCarousel, CCarouselItem
},
    directives: {
        'c-tooltip': CTooltip
    },

}

Vue.component(
    'example-component',
    require('./components/ExampleComponent.vue').default
);

const app = new Vue({
        el: '#my-app',
        data(){
        }
    });

然后是 ExampleComponent.vue

<template>

    <div>
        <CTabs variant="pills" :active-tab="0">
            <CTab title="Home">
                1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                officia deserunt mollit anim id est laborum.
            </CTab>
            <CTab title="Profile">
                2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                officia deserunt mollit anim id est laborum.
            </CTab>
            <CTab title="Disabled" >
                Text will not be shown.
            </CTab>

        </CTabs>

        <CCarousel
                arrows
                indicators
                animate
                height="450px"
        >
            <CCarouselItem
                    captionHeader="First Slide"
                    image="https://picsum.photos/1024/480/?image=52"
                    captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
            />
            <CCarouselItem
                    captionHeader="Blank page"
                    :image="{ placeholderColor: 'grey' }"
                    captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
            />
            <CCarouselItem
                    image="https://picsum.photos/1024/480/?image=54"
            />
        </CCarousel>



    </div>


</template>



<script>

    module.exports = {

        data: function () {
            return {
                message : 'Hello Vue!!'
            }
        },
        name: 'example-component'

    }
</script>

和视图文件

    <div id="my-app">
        <example-component></example-component>
    </div>

有什么想法吗？

Answer 1

我只需要将 Vue 对象包装到 DOMContentLoaded 中，以确保在附加 vue.js 之前 DOM 已准备好。

document.addEventListener("DOMContentLoaded", function(event) {
    const app = new Vue({
        el: '#my-app',
        data(){
        }
    });
})