Vue | Vuetify -> How to scroll to an element using JS ScrollToView()

https://www.pexels.com/@kstupak

THE INTRO

While I was building a UI for the sign ups on dree.com, I came across a need to auto scroll the page to a certain element. I tried using Vuetify’s goTo() method, however for some reason I was unable to get it to work.
I was attempting to scroll the page on a <v-dialog fullscreen> component. However, nothing worked until what I wrote below.

THE SOLUTION

This is the solution that I came up with within my Vue component.

methods : {
    exampleMethod() {
        this.$nextTick(() =>
            document.getElementById('example_id_here').scrollIntoView({behavior: 'smooth'})
        );
    },

I tied this method to an event listener to a v-btn:

<v-btn @click=”exampleMethod”></v-btn>

When the button is clicked, and because of $nextTick() waiting until the element is rendered, it scrolls the page down to the desired element.

Hope this helps.

Happy Coding and God Bless the Ukraine!