Error encountered in VueJS 2: Uncaught ReferenceError: _ is not defined when using debounce

Question

Error encountered in VueJS 2: Uncaught ReferenceError: _ is not defined when using debounce

I'm attempting to implement a debounce function with a 500ms delay. I found guidance in the documentation provided here.

    methods: {
        // Retrieve necessary data for the page
        fetchData: _.debounce(function () {
            this.$http.get('widgets/quickfindordernumber/' + this.quickFindOrderNumber).then(function (response) {
                console.log(response.body)
            }, function (error) {
                console.log(error);
            });
        }, 500)
    }

However, upon execution of this function, an error is displayed in the console stating

Uncaught ReferenceError: _ is not defined

. I have attempted to remove the underscore (_) preceding debounce but received an error indicating that debounce is also undefined.

javascript vue.js vuejs2

Answer 1

Answer №1

In this particular scenario, VueJS utilizes the debounce function from an external library such as underscoreJS or lodash.

To implement it, all you need to do is include the following in your file (after installing it in your npm modules) like so:

import _ from 'lodash';

new Vue({
    // ...
    methods: {
        // Retrieve the necessary data for this page
        fetchData: _.debounce(function () {
            this.$http.get('widgets/quickfindordernumber/' + this.quickFindOrderNumber).then(function (response) {
                console.log(response.body)
            }, function (error) {
                console.log(error);
            });
        }, 500)
    }
});

Answer 2

In this particular scenario, VueJS utilizes the debounce function from an external library such as underscoreJS or lodash.

To implement it, all you need to do is include the following in your file (after installing it in your npm modules) like so:

import _ from 'lodash';

new Vue({
    // ...
    methods: {
        // Retrieve the necessary data for this page
        fetchData: _.debounce(function () {
            this.$http.get('widgets/quickfindordernumber/' + this.quickFindOrderNumber).then(function (response) {
                console.log(response.body)
            }, function (error) {
                console.log(error);
            });
        }, 500)
    }
});

Error encountered in VueJS 2: Uncaught ReferenceError: _ is not defined when using debounce

Answer №1

Similar questions

How to replicate the content of a <template> tag using jQuery

Troubleshooting error messages in the console during conversion of image URL to Base64 in AngularJS

Unable to backtrack once a response has been sent

Refresh the module.exports in a Mocha unit testing script

It is not possible to rely on Vuex to retrieve data for every single component

Is it possible to halt the set timeout function in an AJAX call once a specific condition has been satisfied?

Displaying both the key and value in a filter list using Angular 1.6's ng-switch

Encountering Internal Server Error when running Node-Express app on render.com with query parameters live

How can I determine the caret position within a contentEditable div?

Error: The addDoc() function in FireBase was encountered with invalid data, as it included an unsupported field value of undefined during the execution

Unable to interpret data for 'title'

Creating easy nested list views in React Native using object data structures

What is the solution for resolving AngularJS URL encoding?

The fetch API in Javascript encounters issues when employed within an EJS file

Looking up a destination with the Google Places API

Swap out periods with commas in the content of Json Data

I am consistently running into an Uncaught Syntax error within my Express server.js while using Angular 1.5.6

Performing a mass update in MongoDB with the help of mongoose

Tips for Disabling ML5 Posenet

What is the best way to bring a "subdependency" into ES6?