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

Question

我的问题是，laravel 中的 coreui 确实渲染了组件，但其中 none 是交互式的。例如，当我使用标签（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 中，以确保 DOM 在附加 vue.js 之前准备就绪。

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

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

CoreUI vue.js template in Laravel not working correctly

laravel

vue.js

core-ui