basic vue-lodash usage - errors inside component

I’m doing sth wrong, but following your instructions, I installed globally vue lodash

import Vue from 'vue'
import lodash from 'lodash'
import VueLodash from 'vue-lodash'

Vue.use(VueLodash, lodash)

now using computed in one of my component:

debounceText: {
        get() { return this.proTemplateAdd; },
        set: this._.debounce(function(newValue) {
          this.proTemplateAdd = newValue;
        }, 100)
      },  

I’ve got: Uncaught TypeError: Cannot read property 'debounce' of undefined

using Vue._.debounce(function(newValue)

I’ve got: Uncaught ReferenceError: Vue is not defined

I’m beginner in Vue, so I will be happy to see what I’m doing wrong. Now I’m using just import _ from 'lodash' in my component and it works fine…

[Ewocker]

@gileneusz Sorry, you won’t need reproduction, I should have spot your problem earlier (wasn’t looking to close). 😃 For your above example, it seems like the problem is not related to vue-lodash. The reference here of this is not in the scope, notice that for any vuejs syntax for methods or function, keyword this will only be able to reference inside the created function; however here, you are creating a function and passing its reference where this is not defined. In other words, if you have

methods: {
    random: this._.random(20) // 'this' is not defined
    randomWorking () {
         this._.random(20) // here this == Vue
    }
}

For you learning, you can try create a test method that does the following: (Note that the first one needs to be commented out if you want the second one to work.)

    test () {
         console.log(this.random())
         console.log(this.randomWorking())
    }

For the second thing using the Vue._.XXXX methods. The reason of Vue is not defined error shows up is that you do not import the Vue object with:

import Vue from 'vue'

!!! In the component that you are testing.

Even if you did that in main.js or index.js, you are not able to reference it here, consider other plugins like axios, unless you use global axios plugin such as vue-axios, it has to be imported in each of the component.

[kwojt]

Oh my, I just saw what I did. I tried to use this._.isUndefined() not directly in Vue component, but in additionall class, which I was using in it 😛 So basic mistake…