Проверка поля Vee Validate не обновляется - PullRequest
Новая
       19

Проверка поля Vee Validate не обновляется

1 голос
/ 24 марта 2019

Я создал страницу настроек, где пользователи могут обновлять свои адреса электронной почты. Все работало нормально, но проверка больше не обновляется. Только первое изменение поля ввода вызывает 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>

1 Ответ

0 голосов
/ 25 марта 2019

Проблема в том, что элемент данных form является пустым объектом, поэтому он будет вызывать реактивность только при изменении всего объекта. Либо вам нужно изменить свои данные, чтобы быть таким: 

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

Или в вашей функции инициализации явно добавьте свойство электронной почты как реактивное: 

    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, удалите ваши переводы. Иногда ответ выскакивает у вас, как только вы наберете его как можно проще.

...