Passing method to lodash with vue gives 'Expected a function' Passing method to lodash with vue gives 'Expected a function' vue.js vue.js

Passing method to lodash with vue gives 'Expected a function'


You are passing the return value of this.autocomplete() (maybe undefined) and not the function reference. If you want to do the latter, you have to omit the brackets:

watch: {    query() {        throttle(this.autocomplete, 400);    }}


Working approach:

var demo = new Vue({  el: '#demo',  data: {    query: ''  },  watch: {    query: function() {      this.autocomplete()    }  },  methods: {    autocomplete: _.throttle(function() {      console.log('test');    }, 50)  }})
<script src="http://vuejs.org/js/vue.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script><div id="demo" v-cloak>    <input type="text" v-model="query"></div>

As @Bill Criswell commented,

This is creating a throttled function every time query changes. You want to constantly call the same throttled function like the answer below.


My guess is that you need to define the throttled function with a non-invoked callback in a variable, and then invoke that as a function:

var throttled = throttle(this.autocomplete, 400)watch: {    query() {        throttled();    }}

Just spent quite awhile trying to figure that one out...