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

【问题标题】：VueJS - Invalid handler for event "click": got undefinedVueJS - 事件“点击”的无效处理程序：未定义
【发布时间】：2017-04-04 04:04:31
【问题描述】：

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

当组件被渲染时，我得到： 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

【问题讨论】：

可能是一些小错误，最好把整个组件结构贴出来。
整个组件：pastebin.com/JvkGdW6H

标签： javascript vue.js single-page-application

【解决方案1】：

我并没有真正关注这个问题，发布一个更完整的示例可能会更好。但是，您似乎需要利用该项目的索引。这应该可以帮助您抓住正确的物品。也就是说，如果单击事件未定义，那么听起来它没有在该组件上注册。

下面的例子可能会有所帮助......

new Vue({
  el: '#app',
  data: {
  	anns: [
    	{ state: 'none' },
      { state: 'none' },
      { state: 'none' },
    ],
  },
  methods: {
  	edit (index) {
      this.anns[index].state = 'editing'
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.8/vue.min.js"></script>
<div id="app">

  <div v-for="(annt, index) in anns">
    <button v-on:click="edit(index)">edit</button>
    <p>state: {{ annt.state }}</p>
  </div>

</div>

【讨论】：

是的，如果您在组件中有错误，上述内容将无法修复，更多的是如何重构的示例。如果您发布完整的组件，那么我们可以对其进行故障排除。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

Buena observación, era justo el problema！

【解决方案4】：

我刚刚解决了这个问题。可能你把函数名拼错了，注意字母大小写。

【讨论】：

【解决方案5】：

当点击函数被实现为计算函数时，我遇到了类似的错误。在函数作为方法而不是计算后，问题得到解决。这不是答案，只是更新我的观察。

【讨论】：