VueJS 2 Uncaught ReferenceError: _ is not defined with debounce

Question

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

https://v2.vuejs.org/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.

Answer 1

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)
    }
});