问题描述
我的问题是,laravel 中的 coreui 确实渲染了组件,但它们都不是交互式的。例如,当我使用选项卡(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,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,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>
有什么想法吗?
解决方法
我只需要将 Vue
对象包装到 DOMContentLoaded
中,以确保在附加 vue.js 之前 DOM 已准备就绪。
document.addEventListener("DOMContentLoaded",function(event) {
const app = new Vue({
el: '#my-app',data(){
}
});
})