Estoy tratando de vincular mis propios botones personalizados a un carrusel de flickity en una aplicación nuxt. Mi componente principal establece el valor predeterminado para la direction de apoyo a la left .
<CarouselBase class="w-screen carousel" :direction="direction"> <items/> </CarouselBase> data() { return { direction: 'left', },Este es el código para mi componente de carrusel.
<template> <ClientOnly> <Flickity ref="flickity" :key="keyIncrementer" class="carousel" :class="{ 'carousel--active': active }" :options="computedOptions" > <slot /> </Flickity> </ClientOnly> </template> <script> export default { name: 'BaseCarousel', props: { direction: { type: String, default: '', }, }, mounted() { if (this.direction === 'right') { this.$refs.flickity.next() } else if (this.direction === 'left') { this.$refs.flickity.previous() } }, } Tengo este archivo vue-flickity.js en mi carpeta de complementos
import Vue from 'vue' import Flickity from 'vue-flickity' Vue.component('Flickity', Flickity)Tengo este mensaje de error =>
Cannot read properties of undefined (reading 'previous')no se como arreglar eso...
La referencia de plantilla flickity aún no está disponible en el gancho mounted , ya que <Flickity> se renderiza en el próximo ciclo.
Espere el siguiente ciclo de procesamiento con la devolución de llamada $nextTick() antes de acceder a la referencia de la plantilla enmounted( mounted() :
export default { async mounted() { // wait until next render cycle for refs to be available await this.$nextTick() if (this.direction === 'right') { this.$refs.flickity.next() } else if (this.direction === 'left') { this.$refs.flickity.previous() } }, }Tener el carrusel como un componente como este
<template> <ClientOnly> <Flickity ref="flickity"> <slot /> </Flickity> </ClientOnly> </template> export default { name: 'BaseCarousel', }y usarlo en mi índice con mis propios botones personalizados
<template> <CarouselBase ref="flickityIndex"> <items for the carousel/> </CarouselBase> <button @click="previous">Custom Previous Button</button> <button @click="next">Custom Next Button</button> </template> export default { methods: { next() { this.$refs.flickityIndex.$refs.flickity.next(); }, previous() { this.$refs.flickityIndex.$refs.flickity.previous(); } } } Para llamar al siguiente o al anterior, debe comunicarse con flickity a través de ambos $refs refs.