Как использовать vuelidate с vuetify 2 для вложенных данных? Получение неверного поля - PullRequest
Новая
       32

Как использовать vuelidate с vuetify 2 для вложенных данных? Получение неверного поля

0 голосов
/ 20 января 2020

Я пытаюсь использовать vuelidate с Vuetify 2, но у меня возникают проблемы при проверке значения вложенного объекта.

Этот код работает нормально: 

    <template>
        <v-text-field
        v-model="no_nome"
        :error-messages="nameErrors"
        label="Nome"
        @input="$v.no_nome.$touch()"
        @blur="$v.no_nome.$touch()"
        >
        </v-text-field>
    </template>

    <script>

     import { required } from 'vuelidate/lib/validators'
     export default {

        data() {
            return {
                no_nome:'',
            }
        },
        validations: {
            no_nome: {
                required
            },
        },
        computed: {
            nameErrors () {
                const errors = []
                if (!this.$v.no_nome.$dirty)
                    return errors
                !this.$v.no_nome.required && errors.push('Name is required.')
                return errors
            },
        }
     }
   </scrip>

Но если я измените мои no_nome данные на: 

        data() {
            return {
                user : {
                   no_nome:'',
                }
            }
        },

и 

        <v-text-field
        v-model="user.no_nome"
        :error-messages="nameErrors"
        label="Nome"
        @input="$v.no_nome.$touch()"
        @blur="$v.no_nome.$touch()"
        >
        </v-text-field>

после выполнения $vm0.$v.no_nome.$touch(), $vm0.$v.no_nome.$invalid всегда вернет true, даже если user.no_nome не пусто , Как сделать так, чтобы проверка работала для user.no_nome и любых других значений вложенных данных?

1 Ответ

1 голос
/ 21 января 2020

Вы должны использовать одну и ту же форму данных между вашими данными и вашими проверками. См. Вложенность данных .

Итак, ваши validations должны быть: 

validations: {
  user: {
    no_nome: {
      required
    }
  }
}

и 

computed: {
  nameErrors () {
    const errors = []
    if (!this.$v.user.no_nome.$dirty)
      return errors
    !this.$v.user.no_nome.required && errors.push('Name is required.')
    return errors
  }
}

и 

<v-text-field
  v-model="user.no_nome"
  :error-messages="nameErrors"
  @input="$v.user.no_nome.$touch()"
  @blur="$v.user.no_nome.$touch()"/>

Пример

...