Encountering timeout issues while implementing routes in VueJS

Currently, I am utilizing VueJS to send data to the server and then navigate to another route.

I attempted the following code:

saveSupportArea: function () {
    this.toast("success");
    var that = this;
    setTimeout(function(that){
      that.$router.push('/areas/');
    }, 3000);
  });
  

However, an error occurred:

Uncaught TypeError: Cannot read property '$router' of undefined

I am in need of assistance. Can anyone help me with this issue?

Answer №1

Make sure not to pass that as a parameter when calling the anonymous function within setTimeout.

By passing that as a parameter, you end up resetting its value within the function's scope since it is redefined as a parameter. Since the function does not receive any parameters, that becomes undefined, resulting in an error when trying to access the $router property.

Answer №2

A helpful tip is to utilize the BeforeRouteLeave function and incorporate a setTimeout within that function.

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

Exploring Event Propagation in AngularJS

Currently, I am working on developing a web application using angularjs for the first time. A key feature that I aim to introduce is the ability for users to create a div in the main window upon clicking on an image in the menu. To achieve this functional ...

Setting the state based on Promise values within a loop

I am currently facing a challenge in my React project where I am using axios to interact with an external API. The goal is to loop through the array of objects retrieved from the API call and utilize the values returned by a separate function within the ...

reveal the concealed divs within the list elements

html: In my HTML document, I have a unordered list (ul) with each list item (li) constructed like this: <li class="A">list-item <div>1</div> <div class="B">2 <div class="C">3</div> </div> ...

Using $route to obtain URL parameters

I am faced with the challenge of passing the last parameter from the following URL to a $http.get request in my Angular application. http://myurl.dev/users/32 However, I am struggling to figure out how to pass the 32 as the id. Here is what I have tried ...

Encountering an issue with Spring and AngularJS, as I am receiving an HTTP Status 404 error message

I'm encountering an HTTP Status 404 error within my controller. Server code @RequestMapping(value="/showMsg/", method=RequestMethod.GET,produces= { "application/json" })' public ResponseBody String show(){ HashMap hash = new HashMap(); ...

Attempting to transmit JavaScript information to my NodeJS server

Having some trouble sending geolocation data to NodeJS through a POST request. When I check the console log in my NodeJS code, it's just showing an empty object. I've already tested it with postman and had no issues receiving the data. The probl ...

Structure of directories in NodeJS

I'm diving into the world of web development and NodeJS, embarking on the task of streamlining our app's code and directory layout. Seeking the insights of seasoned developers, I am keen to gather opinions on the file structure pattern I am cons ...

Transitioning away from bower in the latest 2.15.1 ember-cli update

I have been making changes to my Ember project, specifically moving away from using bower dependencies. After updating ember-cli to version 2.15.1, I transitioned the bower dependencies to package.json. Here is a list of dependencies that were moved: "fon ...

HTML5 canvas game issue: background fails to load

I'm a beginner at designing games using HTML5 canvas. I've been following a tutorial on creating games in the style of Angry Birds from the 'pro html5 games' book. I've completed all the steps in the tutorial, but I'm facing a ...

What causes Node.js to be unable to handle requests from Vue.js?

I'm encountering a strange error where Node.js is unable to see the URL address and consistently returns a 404 error. In my Vue.js application, I am making a post request using the axios package when the user clicks a button. The code snippet shows t ...

Why does the value become "Undefined" once it is passed to the controller function?

I am unsure why the console.log function returns "undefined". $scope.onSizeSelected = function(productId, sizeQtyPrice){ console.log('The selected size is: ' + sizeQtyPrice); $scope.updateSelectedProductBySizeSelected(productId ,sizeQtyPrice ...

Exploring alternatives to setTimeOut() for precise timing of Javascript events, especially when incorporating third party events

Here is the HTML element stack that I am working with: <div class="btn-group btnSortAssType" data-toggle="buttons"> <label class="btn ink-reaction btn-primary active"> <input type="checkbox" value="m">Model </label> ...

Insufficient Resources Error (net::ERR_INSUFFICIENT_RESOURCES) encountered while executing jQuery script with multiple ajax requests for 2 minutes

Upon initially loading the code below, everything seems to be functioning smoothly with the dayofweek and hourofday functions. However, shortly thereafter, the browser (Chrome) freezes up and displays the error message: net::ERR_INSUFFICIENT_RESOURCES. Thi ...

Is there a way to update a variable in a controller using AJAX?

Is it possible to update a variable in the controller using Ajax? Controller: $basl = array(2018,11,18,0,0); $deger = 3; $baslamatarihi=Carbon::create($basl[0],$basl[1],$basl[2],$basl[3],$basl[4]); $bitistarihi = Carbon::create($basl[0],$basl[1],$basl[2] ...

Guide on extracting value from XML data using $.ajax and then displaying it within a $.each loop

As part of our study project, we have a task that involves comparing an array of strings with an XML database. My approach was to break it down into two parts since we need to perform the comparison function twice. First, I iterate through the array using ...

Retrieving user information from the database and adding it to the specified element

I've been grappling with what seems like a simple question for the past hour. Below is a script that I have which pulls all active reservations from the reservations table. require("../includes/connect.php"); function dispAllReservations(){ $i= ...

Backing up a mongodb collection can be easily achieved with the help of express.js and Node.js

I am looking to create a monthly backup of my userdatas collection. The backup process involves: I intend to transfer the data from the userdatas collection to a designated backupuserdatas collection. A batch program should be scheduled to run automatica ...

What is the best method for navigating and passing data in dynamic routing with NEXT.JS?

In the process of developing my next.js ecommerce app, I am utilizing Firebase to fetch product data. My goal is to have users click on a product and be redirected to a new page displaying the details of that particular product. However, despite using the ...

Express.io is encountering an issue where it is unable to read the property 'expires' of an undefined element

I am new to working with node.js and I am attempting to utilize express.io for saving cookies. Following a tutorial at https://github.com/techpines/express.io/tree/master/examples#sessions, I have encountered the following error: root@server1 [/nodeexamp ...

Unable to retrieve the data from MongoDB

Struggling to retrieve data from MongoDB, my code in the server.js file is not working as expected. You can view the code here. This is the route I'm using in Insomnia for GET requests: here However, when I test it in Insomnia, I receive the followi ...