VueJS - 事件“点击”的无效处理程序：未定义

Question

我有单击时要编辑的元素列表。我在其他组件中有类似的解决方案，它工作得很好，但在新的组件中却不是，也找不到原因。

渲染组件时，我得到： Invalid handler for event "click": got undefined

列表：

 <div v-for="annt in anns" class="item two-lines" v-if="!anntInEdit">
          <div class="item-content has-secondary" v-on:click="edit(annt)">
            <div>
              {{ annt.title }}
            </div>
            <div >
              {{ annt.body}}
            </div>
          </div>
          <div class="item-secondary">
          <a><i >delete</i></a>
          </div>
        </div>

JS：

 edit (annt) {
        if (this.anntInEdit == null) {
          this.anntInEdit = annt
          this.anntInEditBackup = Object.assign({}, this.anntInEdit)
        }
        this.anntInEditIndex = this.anns.indexOf(annt)
      },

当我单击时，我在编辑 snf div 中显示了带有表单的公告，我可以使用保存（ajax），取消（只是将 inedit 设置为 null）等，但是只要我触摸编辑 div 内的任何输入，我就得到了： [Vue warn]: Invalid handler for event "click": got undefined vue.common.js?e881:1559 Uncaught (in promise) TypeError: Cannot read property 'invoker' of undefined 一旦出现错误，版本中的任何按钮都无法正常工作。

相同的 div 用于新建/编辑，并且对于新的公告工作得非常好。有任何想法吗？

整个组件pastebin： http://pastebin.com/JvkGdW6H

原文由 Marek Urbanowicz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

知道了。这与顶级功能 @click 。它是关于 @click 用于在调用顶级单击时呈现的元素。我在函数名中有拼写错误。不幸的是，Vue 没有抛出丢失函数的名称，这就是我找不到它的原因，因为我找错了地方……

原文由 Marek Urbanowicz 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我也遇到了这个错误 "@vue/cli-service": "^3.9.0" 。 原因是一个需要函数 prop 的子组件，该函数没有被传递。

基于此，我建议检查有问题的子组件（如果适用）以确保传递所需的道具：

 cancel_action: {
  type: Function,
  required: true
},

原文由 Doug Wilhelm 发布，翻译遵循 CC BY-SA 4.0 许可协议