Lodash ReferenceError: _ is not defined in Vue even though it works everywhere else

Question

In my component shoppingCart.vue file I'm calling a simple method:

saveCart : _.debounce(() => {
            console.log('hi');
        }, 2000),

But I get the Error: Uncaught ReferenceError: _ is not defined.

Now gets the fun part. If I change the function for example to:

saveCart(){
   console.log(_.random(0, 5));
}

Everything works perfekt and I get for example: 4. To make it even more interesting, I have some other components that are using _.debounce for example searching for Users:

findUsers: _.debounce(
     function (term) 
     {
        let vm = this;
        axios.get('/search', { params: { user: term }})
            .then(response => {
                vm.updateResult(response.data);
            });
    }
  ,500),

And it works perfect.

So here are some background informations for you. I think I have a guess where the problem is but I'm not sure: I'm using Laravel and I'm import Lodash through bootstrap.js with

window._ = require('lodash');

My component shoppingCart.vue is being called by Buying.vue. Buying.vue is called by

export default new VueRouter({
   mode: 'history',
   routes: [
      {
        path: '/:user/:title',
        component: require('./views/buying/Buying'),
      },
   ],
});

Maybe the problem is somewhere because of vue router? But I tried to make a jsfiddle http://jsfiddle.net/gnu5gq3k/, but my example works in this case... In my real life project test2 creates the problem...

What could be the problem? What kind of informations do you need to understand my problem better?

Edit I must be doing some easy mistake that I cannot see: I changed the code to:

debounce(func, wait, immediate) {

        var timeout;
        return function() {
            var context = this, args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    },
    saveCart: this.debounce(() => {
                // All the taxing stuff you do
                console.log('blubb');
            }, 250),

And I cannot call my own function!

Uncaught TypeError: this.debounce is not a function
at Object

What am I doing wrong?

Answer 1

Error: Uncaught ReferenceError: _ is not defined.

In shoppingCart.vue do import _ from 'lodash';:

<script>
  import _ from 'lodash';

  export default {
     // ...
  }
</script>

Uncaught TypeError: this.debounce is not a function at Object

You can't use this while constructing an object (the object is not created yet). You can use it in functions because that code is not executed right away.

window.a = "I'm window's a";
var myObj = {
  a: 1,
  b: this.a
};
console.log(myObj); // {a: 1, b: "I'm window's a"}