как решить ошибку "это неопределенный" в VUE 3

Question

Я создал компонент vue, как показано ниже:

<template>
    <div class="login">
        <h3>Sign in</h3>
        <input type="text" placeholder="Email" v-model="email"/><br>
        <input type="password" placeholder="Password" v-model="password"/><br>
        <button v-on:click="login()">Login</button>
    </div>
</template>

<script>
    import firebase from 'firebase'

    export default {
        name: "Login",
        data: function () {
            return {
                email: '',
                password: ''
            }
        },
        methods: {
            login: function () {
                firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(function (user) {
                    this.$router.replace('home')
                })
            }
        }
    }
</script>

Все нормально, пока я не введу имя пользователя и пароль и не нажму кнопку «Вход в систему», успех авторизации в firebase и ошибка отображения консоли, это не определено.Как я могу решить эту ошибку?Я не могу использовать роутер.

Answer 1

Использование функции стрелки или метода bind () Пример:

foo().then(() => {
     // access this
})
// or
foo().then(function() {
     // access this
}.bind(this))

Answer 2

login: function () {
   let vm=this
   firebase.auth().signInWithEmailAndPassword(this.email,  this.password).then(function (user) {
                    vm.$router.replace('home')
                })
            }

Answer 3

Функция обратного вызова с then не имеет контекста функции login, доступной для нее.Если вы можете использовать ES6, используйте вместо этого функцию стрелки:

 login: function () {
            firebase.auth().signInWithEmailAndPassword(this.email, this.password).then((user) => {
                this.$router.replace('home')
            })
        }

Однако, если по какой-то причине вы не можете использовать ES6, попробуйте сохранить ссылку на this и использовать ее внутри.функция:

 login: function () {
           var self = this;
            firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(function (user) {
                self.$router.replace('home')
            })
        }

Answer 4

Попробуйте вместо этого использовать функцию стрелки:

firebase.auth().signInWithEmailAndPassword(this.email, this.password).then((user) => {
    this.$router.replace('home')
})