javascript - Passing method to lodash with vue gives 'Expected a function' - Stack Overflow

admin管理员组

文章数量:1290935

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.autoplete(), 400);
    }
}

Methods

methods: {
    autoplete() {}
}

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.autoplete(); }, 400);

I just checked and the autoplete 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: /

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.autoplete(), 400);
    }
}

Methods

methods: {
    autoplete() {}
}

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.autoplete(); }, 400);

I just checked and the autoplete 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/yMv7y/2780/

• javascript
• vue.js
• lodash
• vuejs2

Share Improve this question Follow edited Jun 7, 2017 at 8:24 Stephan-v asked Jun 7, 2017 at 8:07 Stephan-vStephan-v 20.4k3232 gold badges121121 silver badges210210 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

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

Working approach:

var demo = new Vue({
  el: '#demo',
  data: {
    query: ''
  },
  watch: {
    query: function() {
      this.autoplete()
    }
  },
  methods: {
    autoplete: _.throttle(function() {
      console.log('test');
    }, 50)
  }
})

<script src="http://vuejs/js/vue.min.js"></script>
<script src="https://cdnjs.cloudflare./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 mented,

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.autoplete, 400)
watch: {
    query() {
        throttled();
    }
}

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

本文标签： javascriptPassing method to lodash with vue gives 39Expected a function39Stack Overflow