Почему vuelidate не может определить form?

Question

[postya]

Использую Nuxt и vuelidate
Имеется форма.
При загрузке страницы показывается ошибка

Cannot read property 'form' of undefined

Как её исправить?

Если убрать

:class="$v.form.username.$error ? 'is-invalid' : ''"

то ошибка пропадает

<form class="form" @submit.prevent="login">
        <input
          type="text"
          placeholder="username"
          v-model.trim="form.username"
          :class="$v.form.username.$error ? 'is-invalid' : ''"
          class="input"
        />
        <span>Username is required</span>
        <input
          type="password"
          placeholder="password"
          v-model.trim="form.password"
          class="input"
        />
        <span>Password is required</span>
        <div class="button">
          <button class="btn-login">Login</button>
        </div>
      </form>

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

data: () => ({
    form: {
      username: '',
      password: '',
    }
methods: {
    login() {
      this.$v.form.$touch();
      if (this.$v.form.$error) {
        return;
      }
      console.log('validation is successfull');
    },
  },
validations: {
    form: {
      username: { required },
      password: { required}

    }
  }
  }),

Comments

[Алексей Ярков]

Если это не ошибка копипасты, то это наименьшая ваша проблема ))
У вас весь код в data завёрнут зачем-то.

[postya]

Алексей Ярков, во Vue модели элементов берутся из Data

[Алексей Ярков]

postya, вот это неожиданность)) А методы тоже в дата надо класть?

Answer 1

[postya]

Оказалось,что блок validations был не в том скоупе)
Полная валидация выглядит так:

<template>
  <div class="login">
    <div class="container">
      <h1>Login</h1>
      <form class="form" @submit.prevent="login">
        <input
          type="text"
          placeholder="username"
          v-model.trim="form.username"
          :class="$v.form.username.$error ? 'invalid-feedback' : ''"
          class="input"
        />
        <span :class="$v.form.username.$error ? 'showError' : 'hideError'"
          >Username is required</span
        >
        <input
          type="password"
          placeholder="password"
          v-model.trim="form.password"
          :class="$v.form.password.$error ? 'invalid-feedback' : ''"
          class="input"
        />
        <span :class="$v.form.password.$error ? 'showError' : 'hideError'"
          >Password is required</span
        >
        <div class="button">
          <button class="btn-login">Login</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import { required } from 'vuelidate/lib/validators'

export default {
  name: 'login',
  head() {
    return {
      title: 'Login',
      meta: [
        {
          hid: 'login',
          name: 'login',
          content: 'login content',
        },
      ],
    }
  },
  data: () => ({
    form: {
      username: '',
      password: '',
    },
  }),
  methods: {
    login() {
      this.$v.form.$touch()
      if (this.$v.form.$error) {
        return
      }
      console.log('success')
    },
  },
  mounted() {},
  validations: {
    form: {
      username: { required },
      password: { required },
    },
  },
}
</script>

Comments

[Алексей Ярков]

Я это и пытался донести ))

[postya]

Алексей Ярков, Спасибо, сразу не понял о чем речь)