Vee-validate, кажется, замедляет ввод ввода - PullRequest
0 голосов
/ 21 октября 2019

Поле ввода с ve-валидацией выглядело так: медленно , чтобы вводить или каждый раз, когда я вкладывал, чтобы перейти в другое поле. я понятия не имею, так как я следовал примеру документации, этот

Я использую vee-validate version Version 3.x , bootstrap-vue , и ... существует около 20 полей ввода для проверки в одном файле.

Какие могут быть возможные проблемы, вызывающие это замедление?

<template>
    <div fluid class="animated fadeIn">
        <ValidationObserver ref="observer" v-slot="{ passes }">
            <b-form @submit.prevent="passes(kirim)"> 
                <b-card>
                    <b-row align-h="center">
                        <b-col md="12" lg="12">

                            <b-row class="form-group">
                                <b-col md="6" lg="6" offset-md="1">
                                    <ValidationProvider rules="required|numeric" name="telepon_pny" v-slot="{ valid, errors }">
                                        <b-form-group 
                                            label="Telepon Penyewa"
                                            label-cols-sm="4"
                                            label-align-sm="right"
                                        >
                                            <b-input-group size="sm">
                                                <b-form-input type="text" 
                                                :state="errors[0] ? false : (valid ? true : null)"
                                                v-model="tel_pnyw"
                                                ></b-form-input>
                                                    <b-input-group-append><b-input-group-text><i class="fa fa-phone"></i></b-input-group-text></b-input-group-append>
                                                    <b-form-invalid-feedback id="inputLiveFeedback">{{ errors[0] }}</b-form-invalid-feedback>
                                            </b-input-group>
                                        </b-form-group>
                                    </ValidationProvider>
                                </b-col>
                            </b-row>

                            ... //another input field

                            ... //another input field

                            ... //another input field

                        </b-col>
                    </b-row>        
                    <div slot="footer">
                        <b-button size="sm" type="submit" variant="primary" class="btn-ghost-*">Submit</b-button>
                        &nbsp;
                        <b-button size="sm" variant="warning" @click="reset()" class="btn-ghost-*">Reset</b-button>
                    </div>
                </b-card>
            </b-form>
        </ValidationObserver>
    </div>
</template>
<script>
    export default {
        components: {
            ValidationObserver,
            ValidationProvider
        },
        data() {
            return {
                tel_pnyw:'',
            }
        }
    }
</script>

ожидаемый результат - нет проблем с запаздыванием при вводе в поле ввода активированного подтверждения.

...