[Vuejs]-How to toggle between two components in vue.js?

by

2👍

Maybe I understood the question wrong. But you just want the user to be able to go to the registration page when on /login and the other way around.

You could just add add link in case you are using regular router.

<router-link to="/login">
  <h5 class="signin" id="login" @click="isLogin = true">Login</h5>
</router-link>

<router-link to="/register">
  <h5 class="signup" id="signup" :class="{ active: !isLogin }" @click="isLogin = false">signup</h5>
</router-link>
👤Denny Mueller

1👍

  1. Use vue router https://router.vuejs.org/
  2. Create a parent component LoginRegister.vue and include both of them in it
<template>
    <div>
        <login-form v-if="tab === 'login'" />
        <register-form v-if="tab === 'register'" />
        <button @click="tab = tab === 'register' ? 'login' : 'register'">Login/Register</button?
    </div>
</template>

<script>

import LoginForm from "@/LoginForm";
import RegisterForm from "@/RegisterForm";

export default {
    components: {
        LoginForm,
        RegisterForm,
    },
    data() {
        return {
            tab: 'login',
        }
    }

You could also have the buttons in the child components and use $emit to change the tab

👤justrusty

Leave a comment