vueでlodashにメソッドを渡すと、 'Expected a function'が返されます

Question

Vue関数をlodash throttleメソッドに渡そうとしています。私はちょうどこれのような何かをすることができるべきではありませんか？

私は、私は次のエラーを取得していますこれを行うにしようとしています：

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

ウォッチャー

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

方法

methods: { 
    autocomplete() {} 
} 

私は、私は、関数の参照を渡していたとしても依然としてエラーメッセージが表示されます。私は無名関数でそれをラップした場合には発生しません：

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

私はちょうどチェックしautocomplete機能は、実際にそれが一番上に私の例では関数ではないことに関係なく、エラーの火災に思えるん。

ここで何が問題になりますか？

編集：

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

Answer 1

あなたは戻りthis.autocomplete()の値（多分undefined）およびない関数参照を渡しています。あなたが後者を行いたい場合は、括弧を省略することがあります。

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

Answer 2

作業するアプローチを：

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>

@Billクリスウェルがコメントしたよう、

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

Answer 3

私の推測では、スロットル機能を定義する必要があります@strが言ったように