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>

我在同一页面上有2个组件，每个组件都有一个表单。我正在使用Vue.js 2.6第二种形式有一个提交按钮，当单击时会发出一个属性。第一种形式是监听该属性，然后...

Answer 1

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