Блог

Здравствуйте, я пытаюсь создать пользовательскую систему с помощью Vue и Firebase. Я уже добавил необходимый Firebasescript в проект и некоторый код. Проблема в том, что каждый раз, когда я нажимаю на кнопку отправки, она не создает пользователя в Firebase. Надеюсь, вы сможете мне помочь. 🙂 Спасибо за помощь <3

   <div class="signin">
   <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f2/Kingsman_the_golden_circle_logo.png" alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">SignIn</h5>
              <b-form @submit="onSubmit" @reset="onReset" v-if="show">
                <!-- Email  -->
                <b-form-group id="input-group-email" label="Email address:" label-for="input-email">
                  <b-form-input id="input-email" v-model="email" type="email" placeholder="Enter email"></b-form-input>
                </b-form-group>
                <!-- Password  -->
                <b-form-group id="input-group-pass" label="Password:" label-for="input-pass">
                  <b-form-input id="input-pass" type="password" aria-describedby="password-help-block"></b-form-input>
                   <b-form-text id="password-help-block">
                     Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
                   </b-form-text>
                </b-form-group>
                <b-button type="submit" variant="primary">Submit</b-button>
              </b-form>
        </div>
    </div>
  </div>
</template> 

<script>
import firebase from 'firebase'

export default {
  name: 'SignIn',
  props: {
    msg: String
  },
  data () {
    return {
      form: {
        email: '',
        password: ''
      },
      show: true
    }
  },
  methods: {
    onSubmit (evt) {
      evt.preventDefault()
      firebase.auth().createUserWithEmailAndPassword(this.email, this.password).then(
        (user) => {
          this.$router.replace('home')
        },
        (err) => {
          alert('Oops.'   err.message)
        }
      )
    },
    onReset (evt) {
      this.form.email = ''
      this.form.password = ''

      this.show = false
      this.$nextTick(() => {
        this.show = true
      })
    }
  }
}
</script>
  

В шаблоне вы делаете

 <b-form-input ... v-model="email" ...></b-form-input>
  

В методе, который вы делаете

 firebase.auth().createUserWithEmailAndPassword(this.email, ....
 
  

но вы заявляете data , что

   data () {
    return {
      form: {   //  <=== see the form here, that is not taken into account in the above parts of your code
        email: '',  
        password: ''
      },
      show: true
    }
  },
  

Также я не вижу ни одного v-model="password" (или v-model="form.password" ).

Вам необходимо выровнять свой код по разным частям вашего компонента.

Итак, один из способов исправить это — сделать:

   data () {
    return {
      email: '',
      password: '',
      show: true
    }
  },
  

Другой способ — сделать:

 firebase.auth().createUserWithEmailAndPassword(this.form.email, this.form.password).then(...)
  

Я бы посоветовал вам использовать vue-devtools. Это очень поможет вам в отладке этих основных проблем…