Property or method "step" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
Как я понял, ошибка заключается в том что в компоненте Login.vue используется метод из Register.vue и он его не видит. Подскажите как это исправить
Register.vue
<template>
<div class="container mt-4">
<div class="row">
<div v-show="step === 0" class="col-sm-6 mx-auto ">
<h2>Регистрация</h2>
<form @submit.prevent="" novalidate>
<div class="mb-3">
<label for="login" class="form-label">Логин</label>
<input @blur="$v.formReg.login.$touch()"
:class="{'is-invalid error': $v.formReg.login.$error}" v-model="formReg.login" type="text" class="form-control" id="login">
<div v-if="!$v.formReg.login.required" class="invalid-feedback">
Поле обязательно для заполнения
</div>
<div v-if="!$v.formReg.login.maxLength" class="invalid-feedback">
Логин не может быть больше 21 символов
</div>
<div v-if="!$v.formReg.login.minLength" class="invalid-feedback">
Логин не может быть меньше 6 символов
</div>
<div v-if="!$v.formReg.login.checkInput" class="invalid-feedback">
Логин может содержать цифры, буквы и -_.
</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input @blur="$v.formReg.email.$touch()"
:class="{'is-invalid error': $v.formReg.email.$error}" v-model="formReg.email" type="email" class="form-control" id="email">
<div v-if="!$v.formReg.email.required" class="invalid-feedback">
Поле обязательно для заполнения
</div>
<div v-if="!$v.formReg.email.email" class="invalid-feedback">
Поле должно быть email адресом
</div>
<div v-if="!$v.formReg.password.maxLength" class="invalid-feedback">
Email не может быть больше 21 символов
</div>
<div v-if="!$v.formReg.password.minLength" class="invalid-feedback">
Email не может быть меньше 6 символов
</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Пароль</label>
<input @blur="$v.formReg.password.$touch()"
:class="{'is-invalid error': $v.formReg.password.$error}" v-model="formReg.password" type="password" class="form-control" id="password">
<div v-if="!$v.formReg.password.required" class="invalid-feedback">
Поле обязательно для заполнения
</div>
<div v-if="!$v.formReg.password.maxLength" class="invalid-feedback">
Пароль не может быть больше 21 символов
</div>
<div v-if="!$v.formReg.password.minLength" class="invalid-feedback">
Пароль не может быть меньше 6 символов
</div>
<div v-if="!$v.formReg.password.checkPassword" class="invalid-feedback">
Пароль должен содержать заглавные и строчные буквы, цифры
</div>
</div>
<div class="mb-3">
<label for="passwordConfirm" class="form-label">Повторите пароль</label>
<input @blur="$v.formReg.passwordConfirm.$touch()"
:class="{'is-invalid error': $v.formReg.passwordConfirm.$error}" v-model="formReg.passwordConfirm" type="passwordConfirm" class="form-control" id="passwordConfirm">
<div v-if="!$v.formReg.passwordConfirm.required" class="invalid-feedback">
Поле обязательно для заполнения
</div>
<div v-if="!$v.formReg.passwordConfirm.maxLength" class="invalid-feedback">
Пароль не может быть больше 21 символов
</div>
<div v-if="!$v.formReg.passwordConfirm.minLength" class="invalid-feedback">
Пароль не может быть меньше 6 символов
</div>
<div v-if="!$v.formReg.passwordConfirm.checkPassword" class="invalid-feedback">
Пароль должен содержать заглавные и строчные буквы, цифры
</div>
<div v-if="!$v.formReg.passwordConfirm.sameAs" class="invalid-feedback">
Пароли не совпадают
</div>
</div>
<button @click="registerUser" type="submit" class="btn btn-primary btn-success">Зарегистрироваться</button>
</form>
<div class="msg"></div>
</div>
</div>
<Login/>
</div>
</template>
<script>
import { required, email, helpers, minLength, maxLength, sameAs} from 'vuelidate/lib/validators'
const checkLogin = helpers.regex('checkLogin', /^[a-zA-Z][a-zA-Z0-9-_.]{1,20}$/)
const checkPassword = helpers.regex('checkPassword', /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$/)
import Login from './Login'
export default {
components:{
Login
},
data(){
return {
step: 0,
formReg: {
login: '',
email: '',
password:'',
passwordConfirm:''
}
}
},
methods: {
nextStep(){
if(this.step < 1 ){
this.step++
}
},
registerUser(){
this.nextStep();
},
},
validations:{
formReg: {
login: {
required,
minLength: minLength(6),
maxLength: maxLength(21),
checkLogin
},
email: {
required,
email,
minLength: minLength(6),
maxLength: maxLength(21)
},
password: {
required,
minLength: minLength(6),
maxLength: maxLength(21),
checkPassword
},
passwordConfirm: {
required,
minLength: minLength(6),
maxLength: maxLength(21),
sameAsPassword: sameAs('password'),
checkPassword
}
},
}
}
</script>
<style>
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active до версии 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
.error{
background-color: rgba(222, 115, 115, 0.342);
}
</style>
Login.vue
<template>
<div class="row">
<div v-show="step === 1" class="col-sm-6 mx-auto">
<h2>Авторизация</h2>
<form @submit.prevent="loginUser">
<div class="mb-3">
<label for="login" class="form-label">Логин</label>
<input @blur="$v.formReg.login.$touch()"
:class="{'is-invalid error': $v.formReg.login.$error}" v-model="formReg.login" type="text" class="form-control" id="login">
<div v-if="!$v.formReg.login.required" class="invalid-feedback">
Поле обязательно для заполнения
</div>
<div v-if="!$v.formReg.login.maxLength" class="invalid-feedback">
Логин не может быть больше 21 символов
</div>
<div v-if="!$v.formReg.login.minLength" class="invalid-feedback">
Логин не может быть меньше 6 символов
</div>
<div v-if="!$v.formReg.login.checkInput" class="invalid-feedback">
Логин должен содержать цифры и буквы
</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Пароль</label>
<input @blur="$v.formReg.password.$touch()"
:class="{'is-invalid error': $v.formReg.password.$error}" v-model="formReg.password" type="password" class="form-control" id="password">
<div v-if="!$v.formReg.password.required" class="invalid-feedback">
Поле обязательно для заполнения
</div>
<div v-if="!$v.formReg.password.maxLength" class="invalid-feedback">
Пароль не может быть больше 21 символов
</div>
<div v-if="!$v.formReg.password.minLength" class="invalid-feedback">
Пароль не может быть меньше 6 символов
</div>
<div v-if="!$v.formReg.password.checkPassword" class="invalid-feedback">
Пароль может содержать цифры
</div>
</div>
<button @click="nextStep" type="submit" class="btn btn-primary btn-success">Авторизоваться</button>
</form>
</div>
</div>
</template>