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

Posted 2023-02-19

【中文标题】VueJS - 事件“点击”的无效处理程序：未定义

【英文标题】：VueJS - Invalid handler for event "click": got undefined

【发布时间】：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

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

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