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

Posted 2023-02-22

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

【英文标题】：How to get rid of Error in v-on handler: "TypeError: _vm.myFcn is not a function"?

【发布时间】：2020-08-12 19:55:07

【问题描述】：

按照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"

【问题讨论】：

你试过用 () 例如调用它吗？ @click.prevent="debouncedOnSubmit()"，如果不起作用，可能会将其转换为计算函数

有一个非常相似的问题。你的解决方案是什么？我试图在计算的函数中返回 $this.store.state.modules.post.image。它来自一个 vue-croppa：：initial-image="getImage"。方法中的 getImage、getImage.image 甚至 getimage() 仍然会返回此错误。

我仍然无法解决这个问题。没有什么可以“干净”地工作。目前，该应用程序工作正常，测试通过，但我仍然有那个烦人的错误消息。

【参考方案1】：

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

methods: 
 debouncedOnSubmit()

【讨论】：

如果我这样做，那么doSubmit 函数将永远不会被调用。我尝试在我的created 钩子中删除相应的代码并保留它，同时将debouncedOnSubmit 方法添加到这些方法中。在这两种情况下，doSubmit 方法都不会被调用。

我的代码中也遇到了这个“_vm.myFunctionNameHere 不是函数”问题。与 OP 相同的症状，点击处理程序工作，（我可以从处理程序控制台.log 并在我点击它时看到它被调用）但随后 Vue 发出了这个警告。这是我需要的提示，我将单击处理程序（复制意大利面）编写为计算属性而不是方法。一旦它是一个正确的方法，一切都很好。

我认为@LaurentMichel 有两个问题。首先debounceOnSubmit 需要是一个方法。然后需要从该方法正确调用doSubmit（可能通过this.doSubmit）。 “计算的东西”中给出的debounceSubmit 函数的例子看起来很完美，它只是一个方法。这正是@Iman 所建议的。

【参考方案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)
 

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

【讨论】：

也不起作用，原因与 Vishal Pratap 的提议相同

@LaurentMichel 使用计算选项而不是方法！我认为您的函数正在执行计算操作