关注 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"
最佳答案
使用methods
属性来定义你的功能
methods: {
debouncedOnSubmit()
}
关于javascript - 如何摆脱 v-on 处理程序 : "TypeError: _vm.myFcn is not a function"? 中的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61489745/