Open fernandogiroto opened 1 month ago
I'm using vue 3 setup, and I'm trying to use the arrow, using is-outside. However, if I put it as it is in the documentation, I get an error:
Documentation:
<Flicking :options="{ circular: true }" :plugins="plugins"> <div class="card-panel">1</div> <div class="card-panel">2</div> <div class="card-panel">3</div> </Flicking> <span class="flicking-arrow-prev is-outside"></span> <span class="flicking-arrow-next is-outside"></span>
My Project:
<template> <div ref="test" id="test" class="test"></div> <Flicking :plugins="activePlugins" ref="flicking"> <slot name="content"></slot> <template #viewport> <div class="flicking-pagination" v-if="pagination"></div> </template> </Flicking> <span class="flicking-arrow-prev is-outside"></span> <span class="flicking-arrow-next is-outside"></span> </template>
<script setup lang="ts"> // ActivePlugins const testingElement = document.querySelector('.test'); const activePlugins: any[] = [ new Arrow({ parentEl: testingElement, prevElSelector: ".flicking-arrow-prev", nextElSelector: ".flicking-arrow-next", })];
Error: utils.ts:30 Uncaught (in promise) Error: [Flicking-Arrow] Couldn't find element with the given selector: .flicking-arrow-prev
If I put it inside tags, it doesn't give me an error, but it doesn't work:
<template> <div ref="test" id="test" class="test"></div> <Flicking :options="flickingOptions" :plugins="activePlugins" @changed="handleChange" @move-start="handleChangeStart" ref="flicking"> <slot name="content"></slot> <template #viewport> <div class="flicking-pagination" v-if="pagination"></div> </template> <span class="flicking-arrow-prev is-outside"></span> <span class="flicking-arrow-next is-outside"></span> </Flicking> </template>
Still the same:
Any awnser?
Hello @fernandogiroto.
It seems that the Arrow element is not being found as a bug in our plugin. We'll leave a comment once we fix this error and release the newest patch.
I'm using vue 3 setup, and I'm trying to use the arrow, using is-outside. However, if I put it as it is in the documentation, I get an error:
Documentation:
My Project:
Error: utils.ts:30 Uncaught (in promise) Error: [Flicking-Arrow] Couldn't find element with the given selector: .flicking-arrow-prev
If I put it inside tags, it doesn't give me an error, but it doesn't work:
Still the same: