Stack Exchange
vue js как помогите исправить ошибку Property or method "step" is not defined
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>


Добавить в Login.vue, тогда это уберёт ошибку (но не решит проблему):
<script>
export default {
...
data() {
    return {
        step: 0,
        ...
    }
}
...
}
</script>

Если Вы выводите дочерний компонент в родительский — это не значит, что дочерний компонент получает все данные и методы из родительского компонента.
Сейчас же можно в Вашем Register.vue сделать так (при этом из Login.vue это условие нужно убрать):
...
<Login v-if="step === 1"/>
...

Тогда будет работать какая-то логика (но не совсем верно, поскольку неверно помещать в Register.vue компонент Login.vue).
По вашей логике, Вы, изменяя step, хотите переключать отображение (условно, по кнопке). В таком случае выносите условие на один уровень с подключением. Т.е у Вас должна быть какая-то обертка, в которой подключен Register.vue и Login.vue (без какой-либо логики изменения отображения в этих компонентах), а уже в этой обертке Вы меняете Ваш step.

https://imgur.com/a/ihWvAkR

@govnocoder <div><Register ... /><Login ... /></div>, иначе у Вас логин выступает как содержимое слота, который скорее всего не объявлен (да и не нужно так вообще).
