Question

我创建了一个设置页面，用户可以在其中更新其电子邮件地址。一切正常，但突然验证不再更新。仅输入字段的第一次更改会触发validateState()。

任何进一步的更改都不会触发此功能，因此该字段的状态保持不变。

我已经将代码与使用相同代码的其他组件进行了比较，它们仍然可以正常工作。

我正在为表单使用bootstrap-vue组件。

<template>
    <div class="row">
        <div class="col-md-12">
            <b-form @submit="onSubmit">
                <b-form-group :label="$t('general.email')"
                            label-for="settingsEmail"
                            :invalid-feedback="errors.first('email')">
                    <b-form-input id="settingsEmail"
                                type="text"
                                v-model="form.email"
                                :disabled="saving"
                                name="email"
                                :state="validateState('email')"
                                v-validate="{required: true, email: true}">
                    </b-form-input>
                </b-form-group>
                <b-button type="submit" variant="primary" :disabled="saving || !hasChanged() || errors.any()"><i class="fa fa-refresh fa-spin fa-fw" v-if="saving"></i> {{$t('general.save')}}</b-button>
            </b-form>
        </div>
    </div>
</template>

<script>
    import {UPDATE_USER} from '../config/actions'

    export default {
        name: 'settingsAccount',
        data() {
            return {
                form: {},
                saving: false
            }
        },
        computed: {
            user: function() {
                return this.$store.getters.getUser;
            }
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                this.form.email = this.user.email;
            },
            hasChanged() {
                if(this.form.email !== this.user.email) {
                    return true;
                }

                return false;
            },
            onSubmit(event) {
                event.preventDefault();
                this.saving = true;

                this.$validator.validateAll().then((result) => {
                    if (result) {
                        let data = {};

                        if(this.form.email !== this.user.email) {
                            data.email = this.form.email;
                        }

                        this.$store.dispatch(UPDATE_USER, data).then(() => {
                            this.saving = false;
                            this.$validator.reset();
                        }).catch(() => {
                            this.saving = false;
                        });
                    } else {
                        this.saving = false;
                    }
                });
            },
            validateState(ref) {
                if (this.veeFields[ref] && (this.veeFields[ref].dirty || this.veeFields[ref].validated)) {
                    return !this.errors.has(ref)
                }
                return null
            },
        }
    }
</script>

Answer 1

您遇到的问题是form数据元素是一个空对象，因此仅当整个对象发生更改时它才会触发反应性。您需要将数据更改为此：

    data() {
        return {
            form: {email:''},
            saving: false
        }
    },

或者在您的init函数中，将电子邮件属性显式添加为反应式：

    methods: {
        init() {
            this.$set(form,'email',this.user.email)
        },
        //...

如果您不清楚原因，则可以在此处阅读详细信息：https://vuejs.org/v2/guide/reactivity.html

此处为工作示例（减去vuex）：https://codesandbox.io/s/x4kp93w3o

PS，在编写有关vue的问题时，将其简化为一个简单的示例非常有帮助。摆脱vuex，删除翻译内容。有时候，答案越简单越好。

Vee验证字段验证未更新

1 个答案: