如何摆脱 v-on 处理程序中的错误：“TypeError：_vm.myFcn 不是函数”？

Question

根据文档，我编写了一个包含以下逻辑的 Vue 组件：

import debounce from 'lodash/debounce'

export default {
  [...]
  created () {
    this.debouncedOnSubmit = debounce(this.doSubmit, 1000)
  },
  [...]

这背后的想法是我的表单debouncedOnSubmit在提交表单时调用该方法：

        <button
          name="order-basket"
          type="submit"
          @click.prevent="debouncedOnSubmit"
        >
          Click me!
        </button>

现在，该代码在我的应用程序以及我的笑话测试中运行良好。例如，使用 vue test utils，我可以触发click该按钮上的事件，并且可以成功验证单击该按钮时应该发生的相关内容。

但是，我收到以下恼人的警告：

[Vue warn]: Error in v-on handler: "TypeError: _vm.debouncedOnSubmit is not a function"

我部分理解为什么我会收到该警告。确实，我this.debouncedOnSubmit在created()钩子中定义了。尽管该方法返回一个函数，但 Jest 很可能不理解该变量的含义debounce。

如何让 jest 理解这debouncedOnSubmit是一个函数？我需要配置什么？

我不想禁用警告，如此处所述，因为我确实想在测试中保留有关我的行为的反馈。大多数时候，这些警告确实很有帮助，但我对关闭它们感到不舒服。我该如何编写代码才能修复此警告？

编辑

• 改变

[Vue warn]: Error in v-on handler: "TypeError: _vm.debouncedOnSubmit is not a function"

到

@click.prevent="debouncedOnSubmit()"

并没有改变任何问题

• debouncedOnSubmit从钩子转移created()到computed像这样的东西

@click.prevent="debouncedOnSubmit"

抛出错误

TypeError: Cannot read property 'doSubmit' of undefined

• 改变

@click.prevent="debouncedOnSubmit()"

到

@click.prevent="debouncedOnSubmit()"

然后debouncedOnSubmit从钩子转移created()到computed像这样的东西

debouncedOnSubmit: debounce(this.doSubmit, 1000)

仍然使我的应用程序和测试工作，但我仍然在我的笑话测试中得到相同的警告：

[Vue warn]: Error in v-on handler: "TypeError: _vm.debouncedOnSubmit is not a function"

Answer 1

“TypeError: _vm.debouncedOnSubmit is not a function”表示 vuejs 在其内置函数中找不到任何具有此名称的函数。

你错过的一件事就是把你的函数放在Default Components Options像：
methods, computed,actions

methods: {
   debouncedOnSubmit () {
   const submit = this.doSubmit
   return debounce(submit, 1000)
 }
}

然后你可以调用你的函数而不会出现错误