I encountered an error when using the Carousel component from the plugin. The error message is as follows:
vue-carousel.min.js:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c') at Proxy.r (vue-carousel.min.js:6:29067) at renderComponentRoot (runtime-core.esm-bundler.js:895:44) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5059:57) at ReactiveEffect.run (reactivity.esm-bundler.js:185:25) at setupRenderEffect (runtime-core.esm-bundler.js:5185:9) at mountComponent (runtime-core.esm-bundler.js:4968:9) at processComponent (runtime-core.esm-bundler.js:4926:17) at patch (runtime-core.esm-bundler.js:4518:21) at mountChildren (runtime-core.esm-bundler.js:4714:13) at mountElement (runtime-core.esm-bundler.js:4623:17)
package.json -> "vue-carousel": "^0.18.0",
*---------------------------------------------------------------------------------------------*
main.js
import { createApp } from 'vue'
import store from './store'
import router from './router'
import './index.css'
import App from './App.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faUserSecret)
import { Carousel, Slide } from "vue-carousel";
createApp(App)
.use(store)
.use(router)
.use(library)
.mount('#app')
*---------------------------------------------------------------------------------------------*
Carousel.js
<template>
<div>
<carousel>
</carousel>
</div>
</template>
<script>
import { Carousel, Slide } from "vue-carousel";
export default {
components: {
Carousel,
Slide,
},
props: {
msg: String,
},
data() {
return {
perPage: 4,
selectedIndex: 0,
};
},
computed: {
slides() {
return Array.from(Array(10).keys()).map((item) => item + 1);
},
},
methods: {
slideClick(index) {
console.log("Slide index: ", index);
},
handleButtonClick(index) {
const maxIndexAbleClick = this.slides.length - this.perPage;
this.selectedIndex =
index <= maxIndexAbleClick ? index : maxIndexAbleClick;
console.log("new index", this.selectedIndex);
},
},
setup() {},
};
</script>
You can find the code on GitHub for review: https://github.com/camidesarrollo/ecommers-vyp