title: How to toggle between two components by using v-if directives in vue.js?
body: <p>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[<a href="https://i.stack.imgur.com/IFJL6.png" rel="nofollow noreferrer">Register.vue page when user clicks on Login thing it should opens Login page </a>]<a href="https://i.stack.imgur.com/IFJL6.png" rel="nofollow noreferrer">1</a>.[<a href="https://i.stack.imgur.com/urrKE.png" rel="nofollow noreferrer">After clicking Login heading it opens like this </a>]<a href="https://i.stack.imgur.com/urrKE.png" rel="nofollow noreferrer">2</a>in 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</p>
  <p><code>Register.vue</code></p>
  <pre><code>&lt;template&gt;
  &lt;div class=&quot;main&quot;&gt;
      &lt;div  v-if=&quot;flag==true&quot;  class=&quot;container&quot;&gt;
          &lt;img id=&quot;side-img&quot; src=&quot;../assets/sideImg.png&quot; alt=&quot;notFound&quot; /&gt;
          &lt;p id=&quot;side-content&quot;&gt;Online Book Shopping&lt;/p&gt;
          &lt;div class=&quot;box&quot;&gt;
              &lt;div class=&quot;headings&quot;&gt;
                 
                  &lt;h5 class=&quot;signin&quot; v-on:click=&quot;flip()&quot; id=&quot;login&quot; :class=&quot;{ active: isLogin }&quot; @click=&quot;isLogin = true&quot;&gt;Login&lt;/h5&gt;
                  &lt;h5 class=&quot;signup&quot; id=&quot;signup&quot; :class=&quot;{ active: !isLogin }&quot; @click=&quot;isLogin = false&quot;&gt;signup&lt;/h5&gt;
              &lt;/div&gt;
              &lt;form ref=&quot;myForm&quot; @submit.prevent=&quot;handlesubmit&quot;&gt;
                  &lt;div class=&quot;fullname&quot;&gt;
                      &lt;p&gt;FullName&lt;/p&gt;
                      &lt;input type=&quot;name&quot; id=&quot;name-input&quot; class=&quot;namebox&quot;  required v-model=&quot;fullName&quot; autocomplete=&quot;off&quot; pattern=&quot;[A-Za-z]{3,12}&quot;&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;username&quot;&gt;
                      &lt;p&gt;EmailID&lt;/p&gt;
                      &lt;input type=&quot;email&quot; id=&quot;Email-input&quot; class=&quot;emailbox&quot; autocomplete=&quot;off&quot; required v-model=&quot;email&quot; pattern=&quot;^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$&quot;&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;password-section&quot;&gt;
                      &lt;p&gt;Password&lt;/p&gt;
                      &lt;input :type=&quot;password_type&quot; class=&quot;password&quot; :class=&quot;{'password-visible': isPasswordVisible }&quot; id=&quot;passField&quot; v-model=&quot;password&quot; pattern=&quot;^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&amp;])[A-Za-z\d@$!%*?&amp;]{6,}$&quot; required&gt;
                      &lt;i class=&quot;bi bi-eye-slash&quot; id=&quot;togglePassword&quot; @click=&quot;togglePassword();&quot;&gt;&lt;/i&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;mobile&quot;&gt;
                      &lt;p&gt;MobileNumber&lt;/p&gt;
                      &lt;input type=&quot;tel&quot; class=&quot;telephone&quot; autocomplete=&quot;off&quot; v-model=&quot;mobile&quot; id=&quot;tel&quot; pattern=&quot;^\d{10}$&quot; required&gt;
                  &lt;/div&gt;
                  &lt;button class=&quot;btn-section&quot; id=&quot;btn&quot; type=&quot;submit&quot;&gt;Signup&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;Login v-if=&quot;flag==false&quot; /&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Login from './Login.vue'
  import service from '../service/User'
  export default {
      name: 'Register',
      components: {
          Login
      },
      data() {
          return {
              fullName: '',
              email: '',
              password: '',
              mobile: '',
              password_type: &quot;password&quot;,
              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 =&gt; {
                  if (response.status == 201) {
                      alert(&quot;user registered successfully&quot;);
                      this.$refs.myForm.reset();
                      this.$router.push('/login');
                  }
                  return response;
              }).catch(error =&gt; {
                  alert(&quot;invalid credentials&quot;);
                  return error;
              })
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p><code>Login.vue</code></p>
  <pre><code>
  &lt;template&gt;
  &lt;div class=&quot;main&quot;&gt;
      &lt;div  v-if=&quot;flag&quot; class=&quot;container&quot;&gt;
          &lt;img id=&quot;side-img&quot; src=&quot;../assets/sideImg.png&quot; alt=&quot;notFound&quot; /&gt;
          &lt;p id=&quot;side-content&quot;&gt;Online Book Shopping&lt;/p&gt;
          &lt;div class=&quot;box&quot;&gt;
              &lt;div class=&quot;headings&quot;&gt;
                  &lt;h5 class=&quot;signin&quot;  :class=&quot;{ active: !isSignup }&quot; @click=&quot;isSignup = false&quot;&gt;Login&lt;/h5&gt;
                  &lt;!-- &lt;router-link to=&quot;/register&quot;&gt;
                      &lt;h5 class=&quot;signup&quot;  id=&quot;signup&quot; :class=&quot;{ active: !isLogin }&quot; @click=&quot;isLogin = false&quot;&gt;signup&lt;/h5&gt;
                  &lt;/router-link&gt; --&gt;
                  &lt;h5 class=&quot;signup&quot;   id=&quot;signup&quot; v-on:click=&quot;flip();&quot; :class=&quot;{ active: isSignup }&quot; @click=&quot;isSignup = true&quot;&gt;signup&lt;/h5&gt;
              &lt;/div&gt;
              &lt;form @submit.prevent=&quot;&quot;&gt;
                  &lt;div class=&quot;username&quot;&gt;
                      &lt;p&gt;EmailID&lt;/p&gt;
                      &lt;input type=&quot;email&quot; id=&quot;Email-input&quot; class=&quot;emailbox&quot; autocomplete=&quot;off&quot; required v-model=&quot;email&quot; pattern=&quot;^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$&quot;&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;password-section&quot;&gt;
                      &lt;p&gt;Password&lt;/p&gt;
                      &lt;input :type=&quot;password_type&quot; class=&quot;password&quot; :class=&quot;{'password-visible': isPasswordVisible}&quot; id=&quot;passField&quot; v-model=&quot;password&quot; pattern=&quot;^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&amp;])[A-Za-z\d@$!%*?&amp;]{6,}$&quot; required&gt;
                      &lt;i class=&quot;bi bi-eye-slash&quot; id=&quot;togglePassword&quot; @click=&quot;togglePassword();&quot;&gt;&lt;/i&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;forget-section&quot;&gt;
                      &lt;a href=&quot;&quot;&gt;Forgot-password&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;btn-section&quot;&gt;
                      &lt;button type=&quot;submit&quot; @click=&quot;handlesubmit();&quot; class=&quot;login-btn&quot;&gt;Login&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;seperator&quot;&gt;
                      &lt;h5&gt;&lt;span&gt;OR&lt;/span&gt;&lt;/h5&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;btn-groups&quot;&gt;
                      &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Facebook&lt;/button&gt;
                      &lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;&gt;Google&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;Register  v-else /&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Register from './Register.vue'
  import service from '../service/User'
  export default {
      name: 'Login',
      components:{Register},
      data() {
          return {
              email: '',
              password: '',
              password_type: &quot;password&quot;,
              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 =&gt; {
                      if(response.status==200){
                      alert(&quot;user logged in... &quot;);
                      return response;
                      }
              }).catch(error =&gt; {
                  alert(&quot;invalid credentials&quot;);
                  return error;
              })
          }
      }
  }
  &lt;/script&gt;
  
  &lt;style lang=&quot;scss&quot; scoped&gt;
  @import &quot;@/styles/Login.scss&quot;;
  &lt;/style&gt;
  
  
  </code></pre>
  <p><code>console errors</code></p>
  <pre><code>
  vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: &lt;Register&gt; - did you register the component correctly? For recursive components, make sure to provide the &quot;name&quot; option.
  
  found in
  
  ---&gt; &lt;Login&gt; at src/Pages/Login.vue
         &lt;Register&gt; at src/Pages/Register.vue
           &lt;App&gt; at src/App.vue
             &lt;Root&gt;
  </code></pre>