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

Question

I am trying to pass a Vue function to the lodash throttle method. Shouldn't I just be able to do something like this?

When I am trying to do this I am getting the following error:

Error in callback for watcher "query": "TypeError: Expected a function"

Watcher

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

Methods

methods: {
    autocomplete() {}
}

Even though I am passing a function reference I am still getting an error message. If I wrap it with a anonymous function it won't fire:

throttle(() => { this.autocomplete(); }, 400);

I just checked and the autocomplete function does actually seem to fire regardless of the error that it is not a function in my example at the top.

What is going wrong here?

Edit:

Jsfiddle: http://jsfiddle.net/yMv7y/2780/

As @str said, this.autocomplete will return undefined. To get reference you can do this.$options.methods.autocomplete. not sure if its recommended. but even after doing that, it did not call autocomplete method. even after passing a function, throttle did not work. see the example here. There is also alternate solution in the fiddle. — Pradeepb
– Pradeepb, Commented Jun 7, 2017 at 9:23

str · Accepted Answer · 2017-06-07 08:10:57Z

5

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

answered Jun 7, 2017 at 8:10

str

45.5k18 gold badges117 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Stephan-v Over a year ago

I have tried this but nothing happens at all, my autcomplete won't fire. Not even something like a console.log.

str Over a year ago

@Stephan-v Maybe you should add more code. What is throttle?

Stephan-v Over a year ago

Throttle is the lodash function which I imported: lodash.com/docs/4.17.4#throttle

Bill Criswell Over a year ago

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

Egor Stambakio · Accepted Answer · 2017-06-07 10:37:49Z

3

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.

edited Jun 7, 2017 at 10:37

answered Jun 7, 2017 at 8:39

Egor Stambakio

18.2k5 gold badges37 silver badges35 bronze badges

Comments

Will Meier · Accepted Answer · 2018-01-05 23:41:48Z

2

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...

answered Jan 5, 2018 at 23:41

Will Meier

5385 silver badges13 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related