如何解决Laravel 中的 CoreUI vue.js 模板无法正常工作
我的问题是,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(){
}
});
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。