使用 vue.js 热滚动到特定的类元素

Question

我正在使用 Laravel 7、Vue、js 2 和 Bootstrap 4， 当我单击一个表单时，我希望视图滚动到由类选择的页面的特定元素，以防成功。 那是因为我希望用户立即看到提交的成功，因为成功的消息位于页面顶部，而表单提交按钮位于底部。

这是表单提交后的函数：

        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);
                
            });

当我console.log 类的元素alert-success 出现正确的元素...所以我想问题是方法scrollIntoView()。可以帮忙吗？

Answer 1

您可以为此使用scrollTo。只需创建一个方法并将其与您的提交按钮绑定

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

它应该可以工作