Здраствуйте, я делаю форму валидации на Vue.js 3. у меня выпадает предупреждения. Я уже не знаю. Даже самому интересно узнать их причиную

введите сюда описание изображения


<template>
  <div class="container">
    <form @submit.prevent="checkForm">

      <div class="form-group">
        <label for="login">Логин</label>
        <input 
          class="form-control"
          :class="$v.form.login.$error ? 'is-invalid' : ''"
          id="login"
          v-model.trim="form.login" />
        <p v-if="$v.form.login.$dirty && !$v.form.login.required" class="invalid-feedback">
        Обязательное поле
        </p>
        <p v-if="$v.form.login.$dirty && !$v.form.login.minLength" class="invalid-feedback">
          Здесь должно быть больше 5-и символов
        </p>
      </div>
      
      <div class="mb-3">
        <label for="email">Электронная почта</label>
        <input 
          type="email" 
          class="form-control" 
          id="email"
          v-model.trim="form.email" />
      </div>

      <div class="mb-3">
        <label for="password">Пароль</label>
        <input 
          type="password" 
          class="form-control" 
          id="password"
          v-model.trim="form.password" />
      </div>

      <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Запомнить меня</label>
      </div>

      <button type="submit" class="btn btn-primary">Войти</button>
      
    </form>
  </div>
</template>


<script>
  import useVuelidate from '@vuelidate/core';
  import { required, email, minLength } from '@vuelidate/validators'; 

  export default {
    setup() {
      return { $v: useVuelidate() }
    },
    data() {
      return {
        form: {
          login: '',
          email: '',
          password: '',
        },  
      }
    },
    validations() {
      return {
        form: {
          login: { required, minLength: minLength(5)},
          email: { required, email },
          password: { required },
        },
        methods: {
          checkForm() {
            this.$v.form.$touch()
            if (this.$v.form.$error) {
              console.log('Валидация прошла успешно!')
            }
          }
        },
      }
    },
  }
</script>



Ответы (1 шт):

Автор решения: Кирилл Панишев

Почему $v: useVuelidate() если в доке написано v$: useVuelidate()?

Почему methods внутри validations()?

→ Ссылка