БЛОГ НА HUSL


vue js как помогите исправить ошибку Property or method "step" is not defined

Автор вопроса: govnocoder

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>

Источник

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

Автор решения: Vladimir Gonchar

Добавить в 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.

→ Ссылка

licensed under cc by-sa 3.0 with attribution.