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

Question

按照documentation，我编写了一个包含以下逻辑的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 测试工具，我可以在该按钮上触发 click 事件，并且可以成功验证单击该按钮时应该发生的相关事情。

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

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

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

如何让 jest 明白debouncedOnSubmit 是一个函数？我需要配置什么？

我不想禁用警告，正如here 解释的那样，因为我确实想在我的测试中保留对我的行为的反馈。大多数时候，这些警告真的很有帮助，我对关闭它们的想法感到不舒服。如何编写代码以修复此警告？

编辑

• 变化

@click.prevent="debouncedOnSubmit"

到

@click.prevent="debouncedOnSubmit()"

对问题没有任何改变

• 将 debouncedOnSubmit 从 created() 挂钩移动到 computed 这样的东西

debouncedOnSubmit: debounce(this.doSubmit, 1000)

抛出错误

TypeError: Cannot read property 'doSubmit' of undefined

• 变化

@click.prevent="debouncedOnSubmit"

到

@click.prevent="debouncedOnSubmit()"

和将 debouncedOnSubmit 从 created() 挂钩移动到 computed 这样的东西

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

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

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

Answer 1

使用methods 属性来定义你的函数

methods: {
 debouncedOnSubmit()
}

Answer 2

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

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

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

那么你就可以正确调用你的函数了