[Help]: Lost emblaRef after template with v-if #1119
-
SummaryHi! I’d like to discuss an issue I encountered while using embla-carousel. When I switch between different data regions using v-if and template, if the region (e.g., "east") doesn't have any data initially, and then I switch to a region with data (e.g., "north"), the scrollNext button stops working. I’m not sure what’s causing this, but when I switched to using v-show with a , it worked as expected. This is because v-show only changes the display style and doesn’t remove and recreate the elements.
When inspecting with DevTools, it seems like the style: transform property is being lost, but I couldn’t pinpoint the exact cause. I’ve searched through previous issues but haven’t found any relevant information. I don’t think this is a bug, but I’d want to clarify a few things. I’ve also provided a CodeSandbox link with the v-if version for reference. If applicable, which variants of Embla Carousel are relevant to this question?
Additional informationNo response CodeSandbox example |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 4 replies
-
|
@kevinLin0120 thanks for your question. It seems like the problem you describe is similar to or related to this? Maybe even a duplicate? |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much for answering my question. I have tried your solution to solve my problem in this CodeSandbox: I'm not sure if there's anything strange, but it seems like it doesn't work. Thank you for your hard work ! |
Beta Was this translation helpful? Give feedback.
-
|
@kevinLin0120 ah of course, sorry. I just realized that adding the watch listener outside the carousel component won't work. However, until v9 is released, you can use the v9 script locally instead. When v9 is released you can simply swap your local script for the npm package. import { Ref, MaybeRef, isRef, watch, onBeforeUnmount, shallowRef } from 'vue'
import { areOptionsEqual, arePluginsEqual } from 'embla-carousel-reactive-utils'
import EmblaCarousel, {
EmblaCarouselType,
EmblaOptionsType,
EmblaPluginType
} from 'embla-carousel'
export type UseEmblaCarouselType = [
Ref<HTMLElement | undefined>,
Ref<EmblaCarouselType | undefined>,
EmblaCarouselType
]
function useEmblaCarousel(
options: MaybeRef<EmblaOptionsType> = {},
plugins: MaybeRef<EmblaPluginType[]> = []
): UseEmblaCarouselType {
const isRefOptions = isRef(options)
const isRefPlugins = isRef(plugins)
let storedOptions = isRefOptions ? options.value : options
let storedPlugins = isRefPlugins ? plugins.value : plugins
const clientApi = shallowRef<EmblaCarouselType>()
const rootNode = shallowRef<HTMLElement>()
function reInit(): void {
if (!clientApi.value) return
clientApi.value.reInit(storedOptions, storedPlugins)
}
watch(
() => rootNode.value,
() => {
if (rootNode.value) {
EmblaCarousel.globalOptions = useEmblaCarousel.globalOptions
clientApi.value = EmblaCarousel(
rootNode.value,
storedOptions,
storedPlugins
)
} else {
clientApi.value = undefined
}
},
{ immediate: true }
)
onBeforeUnmount(() => {
if (clientApi.value) clientApi.value.destroy()
})
if (isRefOptions) {
watch(options, (newOptions) => {
if (areOptionsEqual(storedOptions, newOptions)) return
storedOptions = newOptions
reInit()
})
}
if (isRefPlugins) {
watch(plugins, (newPlugins) => {
if (arePluginsEqual(storedPlugins, newPlugins)) return
storedPlugins = newPlugins
reInit()
})
}
return [rootNode, clientApi]
}
declare namespace useEmblaCarousel {
let globalOptions: EmblaOptionsType | undefined
}
useEmblaCarousel.globalOptions = undefined
export default useEmblaCarousel |
Beta Was this translation helpful? Give feedback.
-
|
Got it ! |
Beta Was this translation helpful? Give feedback.
@kevinLin0120 thanks for your question.
It seems like the problem you describe is similar to or related to this? Maybe even a duplicate?