使用 vue 将方法传递给 lodash 会给出“预期的函数”答案

【问题标题】：Passing method to lodash with vue gives 'Expected a function'使用 vue 将方法传递给 lodash 会给出“预期的函数”
【发布时间】：2017-11-08 11:22:24
【问题描述】：

我正在尝试将 Vue 函数传递给 lodash 节流方法。我不应该只是能够做这样的事情吗？

当我尝试这样做时，我收到以下错误：

观察者“查询”的回调错误：“TypeError：需要一个函数”

观察者

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

方法

methods: {
    autocomplete() {}
}

即使我传递了一个函数引用，我仍然收到一条错误消息。如果我用匿名函数包装它，它不会触发：

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

我刚刚检查过，autocomplete 函数似乎确实会触发，无论在我的顶部示例中它不是函数的错误如何。

这里出了什么问题？

编辑：

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

【问题讨论】：

正如@str 所说，this.autocomplete 将返回undefined。要获得参考，您可以使用this.$options.methods.autocomplete。不确定它是否推荐。但即使这样做了，它也没有调用autocomplete 方法。即使通过了一个函数，节流阀也不起作用。参见示例here。小提琴中还有其他解决方案。

标签： javascript vue.js lodash vuejs2

【解决方案1】：

您传递的是this.autocomplete()（可能是undefined）的返回值，而不是函数引用。如果你想做后者，你必须省略括号：

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

【讨论】：

我已经尝试过了，但什么也没发生，我的 autcomplete 不会触发。甚至没有像console.log 这样的东西。
@Stephan-v 也许你应该添加更多代码。 throttle 是什么？
Throttle 是我导入的 lodash 函数：lodash.com/docs/4.17.4#throttle
这会在每次查询更改时创建一个限制函数。您想像下面的答案一样不断调用 same 节流函数。

【解决方案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 Criswell 所说，

这会在每次查询更改时创建一个限制函数。你想要像答案一样不断调用相同的节流函数下面。

【讨论】：

【解决方案3】：

我的猜测是，您需要在变量中使用未调用的回调定义节流函数，然后将其作为函数调用：

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

只是花了很长时间试图弄清楚那个......

【讨论】：