vue3-carousel
vue3-carousel copied to clipboard
Anchor links (a tags) redirect the app to the new page after dragging, even prevented elements!
Describe the bug
If there is an anchor link (i.e. the <a> element) inside the <slide> tags, the app will redirect to the new page after dragging the link, even if you have prevented the default!
To Reproduce
~/pages/index.vue:
<template>
<Carousel :items-to-show="2" wrap-around>
<Slide key="1">
<a href="/test" @click.prevent>First element.</a>
</Slide>
<Slide key="2">
<a href="/test" @click.prevent>Second Element</a>
</Slide>
</Carousel>
</template>
<script setup></script>
~/nuxt.config.ts:
export default defineNuxtConfig({
modules: ['vue3-carousel-nuxt'],
});
Expected behavior
Preventing the link from redirecting the page after dragging, because of @click.prevent (equivalents to @click="ev => ev.preventDefault()").
Demo
For testing, please download the project and run it on your computer. vue3-carousel does not work in stackblitz.
https://stackblitz.com/edit/vue3-carousel-link-tester?file=README.md
Desktop:
- OS: Linux
- Browser: Chrome (120.0.6099.129), Firefox (121.0).