[Vuejs]-How to import a single Lodash function in a VueJs project?

by

7👍

✅

The issue is not with importing a single Lodash function,debounce just returns a function (a new version of the original passed function). To call the original function you need to invoke the function that debounce returns.

This is probably what you want:

<script>
import debounce from 'lodash/debounce';

export default {
  // ...
  methods: {
    origFunction() {
      console.log('I only get fired once every two seconds, max!');      
    },
  },
  computed: {
    // Create a debounced function
    // As it is a computed prop it will be cached, and not created again on every call
    debouncedFunction() {
      return debounce(this.origFunction, 2000);
    }
  },
  created() {
    this.debouncedFunction(); // Lodash will make sure thie function is called only once in every 2 seconds    
  }
}
</script>

See more in the Lodash docs.

👤Shaya Ulman

Leave a comment