What is the best way to switch between two components using vue.js?

I have a scenario where I need to toggle between two components, Register.vue [`my_reg-page`] and Login.vue [`my-signin_page`]. If the user opens the register page in the browser (using the /register URL), clicking on the Login heading will toggle the user to the login page (/login). Similarly, if the user opens the login page in Chrome, clicking on the signup heading will toggle the user back to the registration page. Can someone help me with how to achieve this toggling functionality?

Register.vue

<template>
... (content of Register.vue) ...
</template>

<script>
... (script content of Register.vue) ...
</script>

<style lang="scss" scoped>
... (styling for Register.vue) ...
</style>

Login.vue

<template>
... (content of Login.vue) ...
</template>

<script>
... (script content of Login.vue) ...
</script>

<style lang="scss" scoped>
... (styling for Login.vue) ...
</style>
javascriptvue.jsvue-component

Answer №1

Perhaps the question was misunderstood. The requirement is to allow the user to navigate to the registration page from the login page and vice versa.

If you are using a regular router, you can simply insert links as follows:

<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>

Answer №2

  1. Utilize the Vue Router library which can be found at https://router.vuejs.org/
  2. Develop a parent component named LoginRegister.vue and integrate both components within 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',
        }
    }

An alternative option is to have the buttons within the child components and utilize $emit to switch the tab

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Enhance Your Website with jQuery's Dynamic Multi-Animation

I'm facing an issue with my website where, upon clicking the contact link in the navigation bar, a contact box slides down and the navigation bar moves below it. However, when the contact link is clicked again to hide the contact box, the navigation b ...

javascriptjqueryhtmlcss

Utilizing JavaScript to trigger the :hover pseudo-class and implement event transfers

Consider this situation: You have a scenario where two images are stacked on top of each other. The image with the highest z-index is transparent and handles click events, similar to Google's Map API, while the image below is for visual representatio ...

javascripthtmlcssdom

Assess the scss styles specific to components following the global min.css in a React application

ISSUE Imagine we have a min.css file that needs to be imported globally: index.js import ReactDOM from "react-dom"; import App from "src/App"; import "library/library.min.css"; ReactDOM.render(<App />, document.getE ...

javascriptcssreactjsperformancesass

Exploring JSON Data with the Wikipedia API

My current project involves extracting text from Wikipedia articles using their API, which is not the most user-friendly tool. I am facing challenges with parsing the JSON object that I receive in return. The key containing the desired text is labeled &apo ...

javascriptjqueryjsonwikipedia-apimediawiki-api

Is it possible to manipulate the content inside a div tag using JavaScript in HTML?

What is the most efficient way to dynamically adjust a data offset value within an HTML tag using JavaScript? For example: <div class="box" data-offset="2s"></div> I am looking to update the value within the data-offset attribute based on s ...

javascripthtmlcssmedia-queriesaddition

Encountering an Uncaught TypeError while trying to read the 'use' property of undefined in Vue.use(Vuex) is causing some trouble

While setting up Vuex in my Vue frontend, I encountered an issue. Specifically, on my store page located inside the store directory under the file name index.js. I am using Vue 3.0. When running the code, I received an error stating "Cannot read property ...

vue.jsvuexvuejs3

Struggling with undefined values in scope within angular-ui modal

I am having difficulties with referencing the scope in an angular-ui modal. Whenever I try to access the value of the scope, I receive an undefined message. My goal is to retrieve the data entered into ng-model="input.cost_center". Despite trying examples ...

javascriptangularjs

Iframe navigation tracking technology

Let's say I have an iframe element in my HTML document. <html> <body> This is my webpage <button> Button </button> <iframe src="www.example.com"></iframe> </body> </html> If a user clicks on links wi ...

javascripthtmliframe

The search functionality in Select2 is unresponsive when using Bootstrap 5

I am struggling with clicking on the search input dropdown. I have already searched online and found that this is a common issue with select2 in combination with bootstrap3 or bootstrap4. However, with bootstrap5 it seems to be a bit different (I had succe ...

javascriptjqueryjquery-select2bootstrap-5

Strategies for updating arrays in Redux state

I am currently working on developing a project similar to "Trello" using react, redux, nodejs, and mongoDB. However, I have encountered an issue where when I add a card to a list, the redux state is not updated. As a result, I can only see the newly added ...

javascriptreactjsmongodbreduxnodes

How to utilize variables and axios in the mounted lifecycle hook of Vue.JS?

I want to implement an overlay that displays data fetched by axios when the overlay is loaded. I attempted it this way, but encountered an issue where I can't use a variable (.get("/edit/" + id) but it works with a hardcoded value (.get("/edit/" + "12 ...

vue.jsaxios

Customize the label and value in Material UI React Autocomplete

If you visit this link, you can see an example of what I'm trying to achieve. My goal is to have the option label and value be different from each other. In the provided example, the following code snippet is used: const defaultProps = { ...

javascriptreactjsautocompletematerial-ui

What is the best way to rotate a cube when it is clicked on?

My current project involves rotating a cube by clicking on buttons either on the cube itself or floating next to it. At the moment, I have them floating for easier testing purposes, but placing them directly on the cube is not an issue. The main issue I&a ...

javascripthtmlcssrotationcube

Sharing data between sibling components becomes necessary when they are required to utilize the *ngIf directive simultaneously

Within my parent component, I am hosting 2 sibling components in the following manner: <div *ngif="somecode()"> <sibling1> </sibling1> </div> <div *ngif="somecode()"> <sibling1 [dataParams]=sibling1object.somedata> ...

javascriptangularangular6

What could be causing the read-only error in my presentation?

My website has always had a small slider that worked perfectly, but now an error message keeps popping up: Error: "myIndex" is read-only This is the JavaScript code in question: const myIndex = 0; carousel(); function carousel() { let i; const x = ...

javascripthtmlecmascript-6syntax-errorreadonly

Managing Time Before Browser Refresh in AngularLearn how to monitor and examine the time remaining before

In my Angular web application, I am facing an issue where the user's login status is lost every time the browser is refreshed or reloaded. I want to implement a feature that allows the login status to remain active for a short period of time after the ...

javascriptangular

Can a HTML element be transferred from one div to another div in React?

Is there a way to transfer an HTML element from one div to another in React and add animation during the transition process? Any suggestions on how to achieve this would be highly appreciated. ...

javascripthtmlreactjs

Tips for accessing the TextField value when clicking a button event in React Material UI

I'm currently working on a feature where I need to retrieve the input value from a search TextField. Upon clicking the "Search" button, I aim to call an API using the search input. Here's my progress so far: const handleSearchSubmit = async () =& ...

javascriptreactjsreact-hooksmaterial-ui

When a Vue.js datepicker is set as required, it can be submitted even if

When using the vuejs-datepicker, setting the html required attribute on input fields may not work as expected. This can lead to the form being submitted without an input value. <form> <datepicker placeholder="Select Date" required></datep ...

javascripthtmlvue.jsvuejs2vuejs-datepicker

Persistently Undefined Angular Attribute

I have been trying to dynamically bind a CSS class using an AngularJS function. While the functionality is working properly, I keep encountering numerous errors in the browser console. Can anyone offer assistance with this issue? I have included my code an ...

javascriptjquerycssangularjs