vuejs 不会在表单错误时滚动到 div 的顶部

Question

我在同一个页面上有 2 个组件，都带有一个表单。我正在使用 Vue.js 2.6

第二个表单有一个提交按钮，点击时会发出一个属性。第一种形式是侦听该属性并在收到后对其进行操作，一切正常。这个表单帽子发出一个 ajax 请求来验证一个也可以工作的表单。

我遇到的问题是，如果表单中有错误，请滚动到表单顶部并且提交按钮位于页面下方。

没有控制台错误，所有验证消息都会显示，但表单不会滚动到顶部。

我觉得问题出在这里

this.$nextTick(() => {
    this.$refs.notice.scrollTop = 0;
});

我已经尝试了所有可以在 SO 上找到的答案，但没有任何效果

这是第一种形式

<template>
    <form id="contact-form" @submit.prevent="submit" ref="notice">
        <div class="card mb-4 border-0">
            <div class="notice notice-danger" v-show="errored">
                <strong>Error</strong> There are errors in the form!!
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="form-group floating-label-form-group controls">
                        <label>Contact Name</label>
                        <input type="text" class="form-control" placeholder="Contact Name" id="contact" v-model="fields.contact" v-on:change="contactChange">
                        <div v-if="errors && errors.contact" class="text-danger">{{ errors.contact[0] }}</div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="form-group floating-label-form-group controls">
                        <label>Telephone</label>
                        <input type="tel" class="form-control" placeholder="Telephone (optional)" id="telephone" v-model="fields.telephone" v-on:change="telephoneChange">
                        <div v-if="errors && errors.telephone" class="text-danger">{{ errors.telephone[0] }}</div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="form-group floating-label-form-group controls">
                        <label>Email Address</label>
                        <input type="email" class="form-control" placeholder="Email" id="email" v-model="fields.email" v-on:change="emailChange">
                        <div v-if="errors && errors.email" class="text-danger">{{ errors.email[0] }}</div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</template>
<script>
export default {
    data: function() {
        return {
            errors: {},
            errored: false,
        }
    },
    mounted() {
        this.$root.$on('checkFormsValid', (customer) => {
            this.errors = {};
            this.errored = false;

            axios.post('/some/url', this.fields).then(response => {
                this.$root.$emit('validated', response.data.customer);
            }).catch(error => {
                if (error.response.status === 422) {
                    this.errors = error.response.data.errors || {};
                    this.$root.$emit('errors', this.errors);
                    this.errored = true;

                    this.$nextTick(() => {
                        this.$refs.notice.scrollTop = 0;
                    });
                }
            });
        })
    },
    methods: {
        contactChange: function() {
            delete this.errors.contact;
        },
        telephoneChange: function() {
            delete this.errors.telephone;
        },
        emailChange: function() {
            delete this.errors.email;
        },
    }
}
</script>

还有精简的第二种形式

<template>
    <form id="payment-form" ref="form" action="/checkout" method="POST" class="uk-padding">
        <button class="btn btn-primary btn-block" @click.prevent="okToSend()">
            Click me
        </button>
    </form>
</template>

<script>
    export default {
        data() {
            return {
                customer: '',
                loading: false,
            }
        },
        mounted() {
            this.$root.$on('validated', (customer) => {
                // do something
            })
        },
        methods: {
            okToSend: function() {
                this.$root.$emit('checkFormsValid', this.customer)
            }
        }
    }
</script>

Answer 1

打开开发工具并找出生成滚动条的确切 div；然后修改该元素的滚动属性。

您还可以使用以下函数简单地确保特定元素可见：

function scrollToView(element){
    var offset = element.offset().top;
    if(!element.is(":visible")) {
        element.css({"visibility":"hidden"}).show();
        var offset = element.offset().top;
        element.css({"visibility":"", "display":""});
    }

    var visible_area_start = $(window).scrollTop();
    var visible_area_end = visible_area_start + window.innerHeight;

    if(offset < visible_area_start || offset > visible_area_end){
         // Not in view so scroll to it
         $('html,body').animate({scrollTop: offset - window.innerHeight/3}, 1000);
         return false;
    }
    return true;
}