[Vuejs]-How to prevent scroll when a-tag is clicked on carousel of Vue.js

I would like to know what kind of scripts you are using to make this work, I feel like you are using bootstrap, if that is correct, I would first recommend moving this to bootstrap vue rather than this. Nevertheless, I hope this helps if you don’t feel like switching.

You are using an anchor tag and passing it an id like this

<a href="#my-div">content</a>

In browsers, this usually scrolls you to the div that has the ID. I would recommend adding preventDefault() to all click events on these anchor tags, you can either do this by adding a click function to all anchor tags using vue like this

<a href="#my-div" @click.prevent>content</a> // this automatically prevents click event
// or 
<a href="#my-div" @click="myFunction">content</a>
// or in case you want vue to automatically remove click events but add custom functions
<a href="#my-div" @click.prevent="otherFunction">content</a> // this automatically prevents click event



<script>
export default {
...other stuff
methods: {
myFunction(e) {
e.preventDefault();
}
}
}
</script>

though not preferred you may try to prevent this events manually without going through vue, this can be done in the mounted hook
again I would not recommend using this and sticking to vue’s own @click event handler

<script>
export default {
...,
mounted() {
const parent = document.getElementById("id-of-parent-div-that-has-all-anchor-tags") //this is done so you don't mess up anchor tags outside this div
parent.querySelectorAll("a").forEach((anchor) => {
anchor.onclick= (e) => e.preventDefault();
})

}

}

</script>