javascript - 如何摆脱 v-on 处理程序 : "TypeError: _vm.myFcn is not a function"? 中的错误

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>

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

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

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

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

怎么能让 Jest 明白 debouncedOnSubmit是一个函数？我需要配置什么？

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

编辑

变化

@click.prevent="debouncedOnSubmit"

至

@click.prevent="debouncedOnSubmit()"

对问题没有任何改变

搬家debouncedOnSubmit来自 created() Hook computed像这样的东西

debouncedOnSubmit: debounce(this.doSubmit, 1000)

抛出错误

TypeError: Cannot read property 'doSubmit' of undefined

变化

@click.prevent="debouncedOnSubmit"

至

@click.prevent="debouncedOnSubmit()"

和 搬家 debouncedOnSubmit来自 created() Hook computed像这样的东西

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

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

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

Answer 1

使用methods属性来定义你的功能

methods: {
 debouncedOnSubmit()
}