Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...