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中显示了表单，我可以使用save（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

Answer 1

知道了。它不是关于顶级函数@click。当调用顶级点击时，正在渲染的元素约为@click。我在函数名称中拼写错误。不幸的是，Vue并没有丢失缺失函数的名称，这就是为什么我找不到它的原因，因为我在错误的地方寻找......

Answer 2

我也遇到了"@vue/cli-service": "^3.9.0"的错误。 原因是需要功能道具的子组件未通过。

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

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

Answer 3

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

Answer 4

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

下面的内容可能会有所帮助...

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 5

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

VueJS - 事件的处理程序无效＆＃34;单击＆＃34;：未定义

5 个答案: