How to toggle between two components by using v-if directives in vue.js?

Question

i have two components Register.vue and Login.vue ,Register.vue is responsible for registration it will contain two headings like Login and Signup ,if the user clicks on Login heading inside the Register page it's automatically hide the Signup(Register.vue) component and it displays the Login.vue , upto this it's working fine[Register.vue page when user clicks on Login thing it should opens Login page ]1.[After clicking Login heading it opens like this ]2in Login page also two headings Login and Signup if the user clicks on the signup heading it will hide the login.vue component and it should display the Register.vue ,it's not working How to fix this thing

Register.vue

<template>
<div class="main">
    <div  v-if="flag==true"  class="container">
        <img id="side-img" src="../assets/sideImg.png" alt="notFound" />
        <p id="side-content">Online Book Shopping</p>
        <div class="box">
            <div class="headings">
               
                <h5 class="signin" v-on:click="flip()" id="login" :class="{ active: isLogin }" @click="isLogin = true">Login</h5>
                <h5 class="signup" id="signup" :class="{ active: !isLogin }" @click="isLogin = false">signup</h5>
            </div>
            <form ref="myForm" @submit.prevent="handlesubmit">
                <div class="fullname">
                    <p>FullName</p>
                    <input type="name" id="name-input" class="namebox"  required v-model="fullName" autocomplete="off" pattern="[A-Za-z]{3,12}">
                </div>
                <div class="username">
                    <p>EmailID</p>
                    <input type="email" id="Email-input" class="emailbox" autocomplete="off" required v-model="email" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
                </div>
                <div class="password-section">
                    <p>Password</p>
                    <input :type="password_type" class="password" :class="{'password-visible': isPasswordVisible }" id="passField" v-model="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$" required>
                    <i class="bi bi-eye-slash" id="togglePassword" @click="togglePassword();"></i>
                </div>
                <div class="mobile">
                    <p>MobileNumber</p>
                    <input type="tel" class="telephone" autocomplete="off" v-model="mobile" id="tel" pattern="^\d{10}$" required>
                </div>
                <button class="btn-section" id="btn" type="submit">Signup</button>
            </form>
        </div>
    </div>
    <Login v-if="flag==false" />
</div>
</template>

<script>
import Login from './Login.vue'
import service from '../service/User'
export default {
    name: 'Register',
    components: {
        Login
    },
    data() {
        return {
            fullName: '',
            email: '',
            password: '',
            mobile: '',
            password_type: "password",
            isLogin: false,
            isPasswordVisible: false,
            flag: true,
            title: 'Online Book Shopping'
        }
    },
    methods: {
        flip() {
            this.flag = !this.flag;
        },
        togglePassword() {
            this.password_type = this.password_type === 'password' ? 'text' : 'password'
            this.isPasswordVisible = !this.isPasswordVisible
        },
        handlesubmit() {
            let userData = {
                fullName: this.fullName,
                email: this.email,
                password: this.password,
                mobile: this.mobile
            }
            service.userRegister(userData).then(response => {
                if (response.status == 201) {
                    alert("user registered successfully");
                    this.$refs.myForm.reset();
                    this.$router.push('/login');
                }
                return response;
            }).catch(error => {
                alert("invalid credentials");
                return error;
            })
        }
    }
}
</script>

Login.vue


<template>
<div class="main">
    <div  v-if="flag" class="container">
        <img id="side-img" src="../assets/sideImg.png" alt="notFound" />
        <p id="side-content">Online Book Shopping</p>
        <div class="box">
            <div class="headings">
                <h5 class="signin"  :class="{ active: !isSignup }" @click="isSignup = false">Login</h5>
                <!-- <router-link to="/register">
                    <h5 class="signup"  id="signup" :class="{ active: !isLogin }" @click="isLogin = false">signup</h5>
                </router-link> -->
                <h5 class="signup"   id="signup" v-on:click="flip();" :class="{ active: isSignup }" @click="isSignup = true">signup</h5>
            </div>
            <form @submit.prevent="">
                <div class="username">
                    <p>EmailID</p>
                    <input type="email" id="Email-input" class="emailbox" autocomplete="off" required v-model="email" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
                </div>
                <div class="password-section">
                    <p>Password</p>
                    <input :type="password_type" class="password" :class="{'password-visible': isPasswordVisible}" id="passField" v-model="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$" required>
                    <i class="bi bi-eye-slash" id="togglePassword" @click="togglePassword();"></i>
                </div>
                <div class="forget-section">
                    <a href="">Forgot-password</a>
                </div>
                <div class="btn-section">
                    <button type="submit" @click="handlesubmit();" class="login-btn">Login</button>
                </div>
                <div class="seperator">
                    <h5><span>OR</span></h5>
                </div>
                <div class="btn-groups">
                    <button type="button" class="btn btn-primary">Facebook</button>
                    <button type="button" class="btn btn-light">Google</button>
                </div>
            </form>
        </div>
    </div>
    <Register  v-else />
</div>
</template>

<script>
import Register from './Register.vue'
import service from '../service/User'
export default {
    name: 'Login',
    components:{Register},
    data() {
        return {
            email: '',
            password: '',
            password_type: "password",
            isPasswordVisible: false,
            isSignup: false,
            flag:true,
        }
    },
    methods: {
          flip() {
            this.flag = !this.flag;
        },
        togglePassword() {
            this.password_type = this.password_type === 'password' ? 'text' : 'password'
            this.isPasswordVisible = !this.isPasswordVisible
        },
        handlesubmit() {
            let userData = {
                email: this.email,
                password: this.password,
            }
            service.userLogin(userData).then(response => {
                    if(response.status==200){
                    alert("user logged in... ");
                    return response;
                    }
            }).catch(error => {
                alert("invalid credentials");
                return error;
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@import "@/styles/Login.scss";
</style>

console errors


vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <Register> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Login> at src/Pages/Login.vue
       <Register> at src/Pages/Register.vue
         <App> at src/App.vue
           <Root>

I don't quite understand the issue, but, of course, there's nothing to click to change flag if flag is false - since nothing renders when flag is false that can change flag to treu — Jaromanda X, Jun 27 '21 at 06:25
Hello @JaromandaX, i updated my question and added some images, now it's clearly understandable — Sravani, Jun 27 '21 at 06:32
on click of Login heading inside register page it's opening Login page,in login page if i click Signup heading it should display the Register page and hiding the Login page .for this shifting How to do — Sravani, Jun 27 '21 at 06:34
Hi, You have not included Register component in your Login component. — Yash Maheshwari, Jun 27 '21 at 06:37
Hello @YashMaheshwari, means i have to import same as like in Login.vue component na — Sravani, Jun 27 '21 at 06:39
Hello @YashMaheshwari, it's not working when i import into login.vue ,i updated my Login.vue component question, please check that once where did i mistake i am not getting — Sravani, Jun 27 '21 at 07:05
Instead of using ```v-if="flag==true"``` use v-if="flag" and one the other one use ```v-else``` maybe this should work — Gaurav Bhardwaj, Jun 27 '21 at 08:49
Hello @GauravBhardwaj,vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> at src/Pages/Login.vue at src/Pages/Register.vue at src/App.vue — Sravani, Jun 27 '21 at 08:57
You are using recursive components... Means you are requireing register inside and login and login inside register — Gaurav Bhardwaj, Jun 27 '21 at 12:56

How to toggle between two components by using v-if directives in vue.js?

0 Answers0