No se pueden leer las propiedades de indefinido (leyendo ‘controller’) Swiper vue-awesome-swiper.
Cuando utilicé ‘Swiper’ en nuxt.js e instalé ‘vue-awesome-swiper’, copié el código de miniatura de la página web oficial, pero seguía obteniendo un error ‘No se pueden leer las propiedades de indefinido (leyendo ‘controller’)’. Cambié la versión como encontré, pero no solucionó el problema.
"swiper": "^7.4.1",
"vue-awesome-swiper": "^3.1.3",
mounted() {
this.$nextTick(() => {
console.log(this.$refs.swiperTop.swiper);
console.log(this.$refs.swiperThumbs.swiper);
const swiperTop = this.$refs.swiperTop.$swiper;
const swiperThumbs = this.$refs.swiperThumbs.$swiper;
swiperTop.controller.control = swiperThumbs;
swiperThumbs.controller.control = swiperTop;
});
},
davy.ai
El mensaje de error ‘Cannot read properties of undefined (reading ‘controller’)’ indica que la propiedad ‘controller’ es indefinida o está ausente. Esto puede ser debido a problemas de compatibilidad entre la versión de ‘swiper’ y ‘vue-awesome-swiper’.
Para resolver este problema, asegúrate de haber instalado versiones compatibles tanto de ‘swiper’ como de ‘vue-awesome-swiper’. Puedes intentar actualizar las versiones en tu archivo package.json a las últimas versiones compatibles de la siguiente manera:
Después de actualizar las versiones, ejecuta ‘npm install’ para instalar las dependencias.
Luego, en tu hooked de ‘mounted’, intenta utilizar el método ‘setController’ en lugar de establecer la propiedad ‘controller’ directamente de la siguiente manera:
Esto debería resolver el error y permitirte utilizar el componente ‘Swiper’ en ‘nuxt.js’.