Vuelidate не показывает правильные ошибки - PullRequest
Новая
       15

Vuelidate не показывает правильные ошибки

1 голос
/ 29 октября 2019

Я новичок в vuelidate, и, следуя некоторым учебным примерам в их документации, я заметил, что ошибки в моем коде показывали еще до того, как что-то печатать, и отображаются неправильные ошибки, такие как сообщение об ошибке «minlenght», отображаемое ранее. сообщение об ошибке "обязательное поле".

Вот ссылка для документации vuelidate, за которой я следовал, и вот ссылка на официальный пример формы материала vue, которым я былследующий.

Когда я использую официальный пример vuelidate, сообщение об ошибке показывает право летучей мыши вместо того, чтобы показывать только после того, как я что-то наберу:

enter image description here

Вот форма единственного поля, в которой я пытался реализовать проверку: 

<template>
    <div class="action">
        <div class="md-layout md-gutter md-alignment-bottom-center ">
            <form novalidate class="md-layout" @submit.prevent="validateUser">
                <md-card class="cardStyle" >
                    <md-card-header>
                        <div class="md-title">FORM TEST</div>
                    </md-card-header>

                    <md-card-content>
                        FORM TYPE

                        <md-card class="md-medium-size-25 md-small-size-60 md-xsmall-size-100">
                            <md-card-expand>
                                <md-card-actions md-alignment="space-between">
                                    <div>
                                        INFO
                                    </div>

                                    <md-card-expand-trigger>
                                        <md-button class="md-icon-button">
                                            <md-icon>keyboard_arrow_down</md-icon>
                                        </md-button>
                                    </md-card-expand-trigger>
                                </md-card-actions>

                                <md-card-expand-content>
                                    <md-card-content>
                                        <md-field>
                                            <div>
                                                <label for="eventType">Event name</label>
                                                <md-input name="eventName" id="eventName" v-model="form.eventName"/>
                                            </div>
                                        </md-field>
                                            <span class="md-error" v-if="!$v.form.eventName.required">REQUIRED</span>
                                            <span class="md-error" v-else-if="!$v.form.eventName.minlength">INVALID</span>

                                    </md-card-content>
                                </md-card-expand-content>
                            </md-card-expand>
                        </md-card>
                    </md-card-content>
                </md-card>
            </form>
        </div>
    </div>
</template>

<style  scoped>
    /*.cardStyle {
        min-width: 50%;
        margin: 4px;
        display: inline-block;
        vertical-align: top;
    }*/
    .action {
        display: flex;
        align-items: center;
        justify-content: center;
        position:sticky;
        padding-top: 5%;
        padding-bottom: 5%;
    }
</style>

<script>
    import { validationMixin } from 'vuelidate'
    import {
        required,
        email,
        minLength,
        maxLength
    } from 'vuelidate/lib/validators'

    export default {
        name: 'Budget',
        mixins: [validationMixin],
        data: () => ({
            form: {
                formType: null,
                eventName: null,
                BU: null,
                startDate: null,
                startHour: null,
                endDate: null,
                endHour: null,
                participants: null,
                coverage: null,
                local: null,

              },
        }),
        validations: {
          form: {
            eventName: {
              required,
              minLength: minLength(3)
            },
            lastName: {
              required,
              minLength: minLength(3)
            },
            age: {
              required,
              maxLength: maxLength(3)
            },
            gender: {
              required
            },
            email: {
              required,
              email
            }
          }
        },

    }
</script>
...