Taking you back to the main page

I've encountered a problem with my Vue registration where clicking on the register button redirects me to the home page. I believe setting some conditions might help resolve this issue. How can I prevent this redirection? Any suggestions?

register() {
      firebase.auth().createUserWithEmailAndPassword(this.email, this.lozinka)
        .then(function() {
          console.log('Success'); 
          let id = this.email
          db.collection("user")
            .doc(id)
            .set({
              korisnicko_ime: this.korisnicko_ime,
              email: this.email,
              lokacija: this.lokacija,
              ime_objekta: this.ime_objekta,
              kontakt: this.kontakt,
            })
            .then((doc) => {
              console.log("Saved", doc)
            })
         })
        .catch(function(error) {
          console.error("Error...", error);
          if (store.currentUser = null) {
            this.$router.replace({ name: 'Register'});
          }
        });
        
      console.log('Continue'); 
      this.$router.replace({ name: 'Home'});  
    },
javascriptvue.js

Answer №1

It's unclear what your end goal is, but it seems like you're sending a request, attaching callbacks to the promise of that request, and then immediately changing the current route.

register() {
  firebase
    .auth()
    .createUserWithEmailAndPassword(this.email, this.password)
    .then(successCallback)
    .catch(errorCallback);

  this.$router.replace({ name: 'Home'});
}

If you intend to wait for the response of the register request before redirecting the user based on success or error, consider:

  • Exploring Promises with async/await syntax
  • Using const instead of let/var
async register() {
  try {
    const registerResponse = await firebase
      .auth()
      .createUserWithEmailAndPassword(this.email, this.password);
    
    console.log("Success");
    const id = this.email;

    const collectionResponse = await db
      .collection("user")
      .doc(id)
      .set({
        username: this.username,
        email: this.email,
        location: this.location,
        object_name: this.object_name,
        contact: this.contact,
      });

    console.log("Saved", doc);

    // If successful, redirect to home
    this.$router.replace({ name: 'Home'});

  } catch(error) {
    console.error("Error...", error);

    if ((store.currentUser = null)) this.$router.replace({ name: "Register" });
  }
}

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

Iterating through elements to set the width of a container

I am currently working on a function that dynamically adjusts the width of an element using JavaScript. Here is my JavaScript code: <script> $('.progress-fill span').each(function(){ var percent = $(this).html(); if(per ...

javascriptjqueryhtmlcss

Show the respective value names stored in my database for every choice available

I am facing a challenge in explaining what I need, but essentially, I want to showcase the name of the choice I selected from a list stored in the database. To provide more context, below is my select input: <select name="options[1][]" id="perso_1" cl ...

javascriptphphtml

Prevent the Vue page from loading until the data has been fetched successfully

I'm in the process of finding a way to prevent my page from loading until my fetch task is completed. I'm facing some issues that need to be addressed: I have to re-fetch the data each time because I can't reuse the same data. (Changing vie ...

typescriptvue.jsvue-routeranchorvuejs3

How can I arrange a specific array position in Vuejs according to the Id value?

<div v-for="(item, index) in gr" :key="space.id" class="val-name"> </div> After making a few modifications to the API call logic, I was able to achieve my desired outcome. However, the issue lies in the fact that ...

javascriptvue.js

Event indicators can be displayed in multiples on the Vuetify date picker

Currently, I am in the process of learning Vue and Vuetify. My goal is to create a Calendar tool that combines Vuetify with Laravel. While using v-calendar, it allows for rendering multiple 'event-indicators'. Take a look at this example With ...

vue.jsvuetify.js

What is the best method for incorporating multiple jQuery ready() functions?

Trying to develop a web application with HTML files that require multiple JS files. Need to specify tasks inside jQuery.ready() in each JS file, but unable to define $(function () {}) more than once. Is there a way to modify the passed function? index.pug ...

javascriptjquery

How do I insert a new item into the tree structure using Sapui5 CustomTreeItem?

Having an issue with the CustomTreeItem in SAPUI5. I can successfully display the tree structure from JSON, but struggling to manually add data on click of the Add button. https://i.sstatic.net/BpLOK.png In the image above, when I click the + Button, I n ...

javascriptsapui5

What is the best way to have text automatically selected upon clicking a category in a combobox? (Vue.JS 2)

I am currently working with a Vue component that looks like this: <script> export default{ template: '\ <select class="form-control" v-model="selected" v-on:change="search">\ <option v- ...

javascriptvue.jsvuejs2vue-componentvue-resource

Tips for incorporating real-time data into your nodeJS and express applications

I am currently utilizing express for managing all the routing in my web application. Additionally, I have integrated firebase to store my data. For organization purposes, I decided to divide my code as follows: index.js: This file serves as the main node ...

javascriptnode.jsexpressfirebase

The backend's urls.py file must be configured to find the index.html file within the frontend folder

I am looking to designate the path of my index.html file in the public folder on the frontend to be accessed by the urls.py file located in the backend within a separate backend folder. FOLDERS STRUCTURE: backend -> backend -> urls.py f ...

pythonpython-3.xdjangovue.js

Continuous scrolling to ensure that the child element remains perfectly centered

Within my parent div named lyricpadding, there are several <h4> elements with unique IDs. My goal is to use Jquery, Javascript, or CSS to ensure that the <h4> with the class of highlighted remains centered within the parent container. I do no ...

javascriptjquerycsshtml

Tips for accurately extracting values from a decoded JSON

Hello, I am posting this query because I recently encountered an issue with json encoding in PHP. When using the json_encode() function, my original JSON data gets converted to strings instead of maintaining its original variable type. For instance, let&a ...

javascriptphpjsonangulartypescript

Acquiring information from the parent component upon refreshing a route using Vue and Vue Router

I am currently working on a component that displays multiple routes (Step1, Step2, Step3...) consecutively. I am navigating and passing properties like this: <router-view @next-button-step1=" $router.push({ name: 'Step2', ...

vue.jsvuexvue-router

The properties are not appearing on the screen nor in the React Development Tools

Having difficulties grasping React props and mapping data from an array? Struggling to get the props to show up on your Card component, or display in React dev tools? It's unclear where the mistake lies. Seeking assistance to pinpoint the issue. Also ...

javascriptreactjsreact-props

What is the most effective method to package a React application?

I am currently working on embedding a React application within a Web component's Shadow Root or an iFrame in order to create a widget for a Chatbot messenger similar to Intercom widget. The technologies I am using include: React 16.8.6 Typescript 3. ...

javascriptreactjsiframeweb-componentshadow-dom

Spacing in a vertical orientation with Vuetify

Feeling like it's 11/10 chance that it's just too late in the day and my brain is in idiot mode, but let's give it a shot... So, I have a list of navigation links (v-list-item in a v-list) ... I'm attempting to make one of the links s ...

vue.jsvuetify.js

What is the process of generating clozed text using HTML and CSS?

Is there a method to conceal text and create an underline of identical length in an HTML document? In this technique, certain highlighted words remain hidden, substituted with underlines that match the original text's length precisely. Additionally, a ...

javascripthtmlcss

using ajax to repopulate a multi-select form with a drop-down form

Looking to dynamically repopulate a multiple select form from a database using AJAX based on the selection of a drop-down value. Below is the code for the drop-down menu: <?php $sql2 = "select _id, title from sub_category order by title;"; ...

javascriptphpjqueryajaxforms

How to Display JavaScript Error Messages Beside an HTML/JSP Input Field with CSS

Hey there! I've got a simple CRUD input form with Javascript validation. When an error occurs, the error message pops up below the input field in red text. I've tried various methods like floats and adjusting margins, but nothing seems to work. ...

javascripthtmlcssjsp

Prevent all click and keyup events from being activated until the ajax call finishes

Is there a way to prevent all links from being activated until an ajax call is complete? I am looking for a solution that works for both click events and keyup triggers. In essence, what I am after is: - The Ajax link is activated (either through a clic ...

javascriptjqueryajaxclickkeyup