Scope Function Challenges in Vue.js Method

Question

Scope Function Challenges in Vue.js Method

Having a SetInterval embedded within a Promise in Axios is causing an error when trying to run a function inside the SetInterval block. The specific error encountered is:

    methods: {
    getJson() {
        axios.post(url, FormObject, config)
        .then(response => {
        var searchId = JSON.stringify(response.data.searchId)
        this.sendStatus(searchId)
        var status = setInterval(function(){ this.sendStatus(searchId) }, 
         30000);
        })
        .catch(err => (this.error = err))

      },

      sendStatus(searchId){},

     }

The initial call to 'sendStatus' function works as expected. However, the setInterval operation results in the following error message:

Uncaught TypeError: this.sendStatus is not a function at eval

javascript vue.js setinterval

Answer 1

Answer №1

In your second call, the context of this is being changed because a new function is being introduced.

If you are working with ES6, an easy solution to this issue is to use an arrow function instead of the function keyword.

    var status = setInterval(() => { this.sendStatus(searchId) }, 
      30000);
    })

If ES6 is not an option for you, then you can use the .bind() function as a workaround, which is explained in this question. Another approach, though not recommended, would be to reassign this to a local variable.

var that = this;

Then within your callback function, you can use that.sendStatus.

Answer 2

In your second call, the context of this is being changed because a new function is being introduced.

If you are working with ES6, an easy solution to this issue is to use an arrow function instead of the function keyword.

    var status = setInterval(() => { this.sendStatus(searchId) }, 
      30000);
    })

If ES6 is not an option for you, then you can use the .bind() function as a workaround, which is explained in this question. Another approach, though not recommended, would be to reassign this to a local variable.

var that = this;

Then within your callback function, you can use that.sendStatus.

Answer 3

Answer №2

To make sure your setInterval works correctly, use an arrow function like this:

setInterval(() => this.sendStatus(searchId))

If you want to learn more about arrow functions and how they handle this, check out this informative resource.

Answer 4

To make sure your setInterval works correctly, use an arrow function like this:

setInterval(() => this.sendStatus(searchId))

If you want to learn more about arrow functions and how they handle this, check out this informative resource.

Scope Function Challenges in Vue.js Method

Answer №1

Answer №2

Similar questions

Guide for incorporating a clickable link into a specific section of a component

What is the best way to extract a JSON object from a website search using getJSON or similar techniques?

Limit window scroll event to prevent overload in React using setTimeout

What is the best way to duplicate/rename/replace an image in PHP while utilizing form submission and radio buttons?

Using JavaScript to enable autocomplete functionality in an ASP.NET combobox

Easily targeting elements and their descendants in jquery: What you need to know!

Load custom JS with Google

What is the method to adjust the dimensions of the browser's inner window or viewport?

Adjusting AngularJS scroll position based on key presses

There is no response provided by the function

Establish a spacing between a pair of geometries in THREE.JS

A secure password must consist of a minimum of 6 characters

Is there a way to prevent this React function from continually re-rendering?

Create a dynamic and interactive website using a combination of jQuery and AngularJS

Utilizing vue-chartjs to display a pair of data figures side by side

Transfer the contents of one array into the center of another array using JavaScript

Issue with the date picker UI in react-datetime not displaying correctly?

Issues with CSS background colors

Is it possible to create a back button in Javascript or jQuery that only works if the previous page was within the same website

The mtree script in external JavaScript is failing to function properly after dynamically inserting elements using jQuery