Остановка страницы после перехода из модального - PullRequest
Новая
       3

Остановка страницы после перехода из модального

1 голос
/ 28 февраля 2020

Всякий раз, когда я перемещаюсь от моего модального компонента в VueJS к другому маршруту, следующая страница останавливается, пока я не обновлю sh. Пожалуйста, что я могу сделать, чтобы решить эту проблему.

Ниже приведен мой код компонента (раздел Шаблон). 

<template>
    <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i data-feather="user"></i>Login
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="#" class="vld-parent" ref="talentLogin">
                        <div class="form-group">
                            <input
                                    type="email"
                                    placeholder="Email Address"
                                    class="form-control"
                                    v-model="loginDetails.email"
                            />
                        </div>
                        <div class="form-group">
                            <input
                                    type="password"
                                    placeholder="Password"
                                    class="form-control"
                                    v-model="loginDetails.password"
                            />
                        </div>

                        <button type="button" @click="logIn" class="button primary-bg btn-block">Login</button>

                        <a href onclick="showResetPasssord" class="align-center">Reset Password</a>
                    </form>
                    <ResetPasswordModal ref="resetPasswordModal"></ResetPasswordModal>
                </div>
            </div>
        </div>
    </div>
</template>

Ниже мой раздел Javascript с методом, который перемещает пользователя на следующую страницу после входа в систему 

<script>
    import UIUtil from "../../utils/ui-utils";
    import ResetPasswordModal from "./ResetPasswordModal";
    import $ from "jquery";
    import {mAuth} from "../../firebase/firebase-service";

    export default {
        name: "Login",
        components: {ResetPasswordModal},
        data() {
            return {
                email: "",
                password: "",
                loginDetails: {email: "", password: ""}
            };
        },
        methods: {

            async logIn() {
                if (this.validateLoginDetails()) {
                    let response = await mAuth().signInWithEmailAndPassword(this.loginDetails.email, this.loginDetails.password).catch(function (error) {
                        // Handle Errors here.
                        var errorCode = error.code;
                        var errorMessage = error.message;

                        console.log(errorCode)
                        console.log(errorMessage)

                    });
                    console.log(response.user)

                    this.$router.push("/jobseeker");
                }

            },

            validateLoginDetails() {
                if (!this.validateEmail(this.loginDetails.email)) {
                    UIUtil.displayAlert("Error", "Wrong email format", "error");
                    return false;
                }
                // FIXME: verify login details from server
                // verification statement
                return true; // success
            },
            validateEmail(mail) {
                // eslint-disable-next-line no-useless-escape
                return !!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail);
            },

            }
        }
    };
</script>

Я испытываю это только тогда, когда навигация происходит из модального компонента

...