Clicking dots submits Form

[djaybalaji]

Clicking the dots to change slides submits the form:

<template>
    <form action="" @submit="formSubmit()">
        <VueSlickCarousel ref="carousel" v-bind="settings">
            <div v-for="(param, index) in parameters" :key="index">
                <h5>{{ param }}</h5>
            </div>
        </VueSlickCarousel>
    </form>
</template>

<script>
import VueSlickCarousel from "vue-slick-carousel";
import "vue-slick-carousel/dist/vue-slick-carousel.css";
import "vue-slick-carousel/dist/vue-slick-carousel-theme.css";
export default {
    name: "VueSlickCarouselTesting",
    components: {
        VueSlickCarousel,
    },
    data() {
        return {
            settings: {
                dots: true,
                dotsClass: "slick-dots",
                infinite: true,
            },
            parameters: ["Test1", "Test2", "Test3"],
        };
    },
    methods: {
        formSubmit() {
            alert("Form Submitted");
        },
    },
};
</script>
<style scoped></style>

[mircea-chirita]

That's because the button does not have a specified "type" attribute, so by default comes as "submit", which is not ok. You can fix this by adding custom pagination as described here Customizing arrow dots