What does it mean when there is an error message that says "Unable to access the property '$router

Having trouble creating a login function for users on my page, but I keep getting the error message "Cannot read property '$router' of undefined."

The code I'm using for login in Vue is located within the Export default section.

import {fb} from "../firebase";
import router from '../router';

export default {
 name: "NavBar",
 components: {...},
 data() {
   return {
    login: false,
    register: false,
    name: null,
    email: null,
    pwd: null,
  };
 },
methods: {
logInner(){
      fb.auth().signInWithEmailAndPassword(this.email, this.pwd)
          .then(function(){
          this.$router.replace('users');
          })
          .catch(function(error) {
              // Handle Errors here.
              var errorCode = error.code;
              var errorMessage = error.message;
              if (errorCode === 'auth/wrong-password') {
                  alert('Wrong password.');
              } else {
                  alert(errorMessage);
              }
              console.log(error);
      });

  },
registering() {
  fb.auth().createUserWithEmailAndPassword(this.email, this.pwd)
    .then((user) =>{
      this.$router.replace('users');
    })
    .catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
      if (errorCode == "auth/weak-password") {
        alert("The password is too weak.");
      } else {
        alert(errorMessage);
      }
      console.log(error);
     });
   }
 }
 };

I have attempted to use router.push and router.go without success. Any assistance would be appreciated!

Answer №1

this is not accessible within the fb.auth() method, so try the alternative approach provided below. For a more detailed explanation, refer to this answer:

logInner(){
let self = this
      fb.auth().signInWithEmailAndPassword(this.email, this.pwd)
          .then(function(){
          self.$router.replace('users');
          })

and

registering() {
let self = this
  fb.auth().createUserWithEmailAndPassword(this.email, this.pwd)
    .then((user) =>{
      self.$router.replace('users');
    })

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

Having trouble making class changes with ng-class

I am attempting to change the direction of the arrow in my checkbox by utilizing two classes with the assistance of ng-class. Unfortunately, it is not producing the desired outcome. Below is my code: Note: The angularJS CDN has already been incorporated. ...

onsubmit function was never triggered

Seems like a silly mistake, but I'm encountering an issue with my HTML form. Here's a snippet of the code: <form onsubmit="updateProfile();"> <input type="submit" value="Update Account"> .. ... </form> However, w ...

Exploring the depths of object recursion: a guide to looping endlessly

What is the method to retrieve all values from an object and compare them? Object : obj = { a : 10, b : [{b1 : 101 , b2:201},{b3 : 102 , b4:204}], c : [{c1 : 107 , c2:209 ,d :[{d1:109},{d2:402}]} } function compareValues(101,obj) { ...

Is there a way to ensure that the selected value remains displayed on the select menu even after

Here is a sample code for a status select input: <label>Status:</label> <v-select :options="options" v-model="status" @input="changeValueStatus" /> data() { return { options: [ { label: 'Su ...

Having trouble adding HTML content to a parent div using jQuery and BackboneJS?

Utilizing Backbone Marionette to create a series of views, I am now faced with the task of making an AJAX call to my backend. In order to provide visual feedback to the user indicating that an action is being performed, I decided to integrate a spinner int ...

Get a document from a NodeJS Server with the help of Express

How can I improve my file downloading functionality in Node.js? Currently, when I try to download a PDF file from the server, the content is displayed as data instead of initiating the download process. I would like it to function similar to how it's ...

What are the reasons behind the inability to import an image file in Next.js?

Having an issue with importing image file in Next.js I'm not sure why I can't import the image file... The image file is located at 'image/images.jpg' In Chrome browser, there are no error messages related to the image, However, in ...

Is there a way to combine all the text on an HTML page into one continuous string without losing the CSS styling?

If I want to change all the text within every HTML element on a page to just the letter "A", how would I do it? Let's say I have a webpage set up like this: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

Unable to locate the element with the specified id: <path>

I am aiming to dynamically change the fill attribute of a specific <path> element when a page loads. Here is the detailed information about the path element: <path xmlns="http://www.w3.org/2000/svg" style="fill:#ff0000;stroke:#000000;stroke-wid ...

Simple way to enlarge an image on a webpage with a click

On my website, there is an image that is currently sized at 200x150 pixels. <img src="http://s3-media1.ak.yelpcdn.com/bphoto/sMONYSiLUQEvooJ5hZh0Sw/l.jpg" alt="" width="200" height="150"> Is there a way to implement a feature where visitors can cl ...

Using Google Apps Script to upload a text file to Google Drive

It seems like uploading a file should be straightforward. However, I'm struggling with understanding blobs. function createFileUploader() { var app = UiApp.createApplication(); var panel = app.createVerticalPanel().setId('panel'); v ...

How can Ext JS 6.2 automatically expand the East panel when the West panel is triggered?

In my Ext JS v6.2 Grid application, I am faced with the task of ensuring that if the WestRegion panel is closed, the EastRegion panel should open automatically, and vice-versa. Being new to Ext JS, I initially attempted to achieve this using jQuery. Howeve ...

Populate my empty arrays with information retrieved from Firebase

I am currently working on creating a "single client" view for my application. Each client has a first name (prenom) and a last name (nom). However, even though my application recognizes that these values exist for each client, they do not appear on the scr ...

Enhancing Javascript with ES6 for nested for loop operations

Hey there, I have a question about converting a nested for loop into an Array map/ES6 way. How does that work when dealing with nested for loops? for (var i = 0; i < enemy.ships.length; i++) { for (var n = 0; n < enemy.ships[i].locat ...

$cookie retrieves information in the form of a string rather than a Map

Below is a snippet of my Javascript code. app.controller('RegisterCtrl', function($scope, $cookies) { $scope.registerInfo = {}; if($cookies.registerInfo){ angular.forEach($cookies.registerInfo, function(value, key) { $scope.registerInfo[ke ...

How to iterate through a JavaScript array in reverse order using a for loop and the array's length property

When looking to iterate through an array with the values [8,7,6,5,4], some may wonder why a for loop using the length of 5 continues to function even though there is no element at index 5 in the array. for(let i=array.length;i>=0;i++){ //do somethin ...

Ways to execute a function when clicking on a date using HTML 5 datepicker input type

How can I call a function in angular js when a date is selected from an html5 date-time picker using a mouse click? I need help with this. Here is the HTML code: <div class="col-lg-4"> <input class="form-control" type="datetime" date-time auto ...

It's next to impossible to secure expedited work on an ongoing project using Vercel

Yesterday, I successfully deployed an application on Vercel using only ReactJS. Today, I made the decision to develop an API for my application, To clarify, I have a folder housing the React app, and within that, I created a directory named "api" followi ...

Preventing duplicate submissions with an onclick button: Here's how

processApproval = (item) => { const {approve} = this.state; let {errors} = this.state; if (!isUndefined(approve.text)){ if (approve.text.length > 0){ this.setState({loading: true}); ...

Exploring the Origin of "props" in ReactJS

Currently, I am diving into the world of the official reactJS tutorial and you can find it here: https://reactjs.org/tutorial/tutorial.html#passing-data-through-props My journey with reactJS has been interesting so far, although there are still some parts ...