bootstrap 4 - Hot to scroll to a specific class element with vue.js

Question

I am using Laravel 7, Vue,js 2 and Bootstrap 4, When I click a form I would like that the view scrolls to a specific element of the page selected by class in case of success. That because I would like that the user visualizes immediately the success of the submission and because the message of success is located at the top of the page and the form submission button is located at the bottom.

This is the function that follows the submission of the form:

        insertMeeting: function() {
            axios.post('api/store_meeting', this.formMeeting)
            .then((response) => {
                this.errors = response.data;
                if (Object.keys(this.errors).length === 0) {
                    this.success = true;
                    var el = this.$el.getElementsByClassName("alert-success")[0];
                    console.log(el); //<div class="alert alert-success" style="">The meeting has been created.</div>
                    el.scrollIntoView(); //problem
                    this.formMeeting = {};
                } else {
                    this.success = false;
                }
            })
            .catch(error => {
                this.success = false;
                console.log(error);
                
            });

When I console.log the element of the class alert-success appears the right element... so I suppose that the problem is the method scrollIntoView(). Can help?

question from:https://stackoverflow.com/questions/65603132/hot-to-scroll-to-a-specific-class-element-with-vue-js

Answer 1

You can use scrollTo for that. just create a method and bind it with your submission button

methods: { 
        scrollToTop() {
           windows.scrollTo(0,0)
        }
}

It should work