I'm trying to debounce a function from running for 500ms. Following the documentation here:

.html#debounce-Param-Attribute-for-v-model-removed

    methods: {
        // Get the data needed 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)
    }

But when running this function I get an error in the console Uncaught ReferenceError: _ is not defined I have tried removing the _. in front of debounce but it says debounce is not defined either.

I'm trying to debounce a function from running for 500ms. Following the documentation here:

https://v2.vuejs/v2/guide/migration.html#debounce-Param-Attribute-for-v-model-removed

    methods: {
        // Get the data needed 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)
    }

But when running this function I get an error in the console Uncaught ReferenceError: _ is not defined I have tried removing the _. in front of debounce but it says debounce is not defined either.

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited Jul 13, 2022 at 23:02 tony19 139k2323 gold badges277277 silver badges347347 bronze badges asked Mar 15, 2017 at 15:51 twiggtwigg 3,9931414 gold badges5959 silver badges102102 bronze badges 1

• 2 _ is underscore or lodash, an external library, not Vue. – Bert Commented Mar 15, 2017 at 15:56

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

In the example, VueJS use the debounce function from external library like underscoreJS or lodash.

To works with it, you just include this in your file (after install this in your npm modules) like this :

import _ from 'lodash';

new Vue({
    // ...
    methods: {
        // Get the data needed 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)
    }
});