javascript - Vee Validate field validation not updating - Stack Overflow

admin管理员组

文章数量:1410724

I have created a settings page where users can update their email addresses. Everything worked fine but suddenly the validation is not updating anymore. Only the first change of the input field triggers validateState().

Any further changes will not trigger this function so the status of that field stays as it is.

I have pared the code with other ponents that use the same code and they still work fine.

I am using bootstrap-vue ponents for the form.

<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
            }
        },
        puted: {
            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>

I have created a settings page where users can update their email addresses. Everything worked fine but suddenly the validation is not updating anymore. Only the first change of the input field triggers validateState().

Any further changes will not trigger this function so the status of that field stays as it is.

I have pared the code with other ponents that use the same code and they still work fine.

I am using bootstrap-vue ponents for the form.

<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
            }
        },
        puted: {
            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>

• javascript
• vue.js
• bootstrap-vue
• vee-validate

Share Improve this question Follow edited Mar 24, 2019 at 9:23 nipeco asked Mar 24, 2019 at 9:08 nipeconipeco 76022 gold badges99 silver badges2525 bronze badges 1

• Can you create codesandbox /codepen for the issue? – Varit J Patel Commented Mar 24, 2019 at 9:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

The problem you're having is that the form data element is an empty object, so it will only trigger reactivity when the whole object changes. Either you need to change your data to be this:

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

Or in your init function, explicitly add the email property as reactive:

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

If you're not clear on why, you can read the details here: https://v2.vuejs/v2/guide/reactivity.html

A working example (minus vuex) here: https://codesandbox.io/s/x4kp93w3o

PS, when writing questions about vue, it's very helpful to boil it down to a simpler example. Get rid of vuex, remove your translation stuff. Sometimes the answer will jump out at you once you have it as simple as possible.

本文标签： javascriptVee Validate field validation not updatingStack Overflow