[Vue warn]: Invalid handler for event "click": got undefined / vue.common.js?e881:1559 Uncaught (in promise) TypeError: Cannot read property 'invoker'

Vue.js version

2.0.8

Steps to reproduce

Do the same?

What is Expected?

Working…

What is actually happening?

Hi,

I have list of elements which I want to go to edit when clicked. I have similar solution in other component and it is working perfectly fine but in new one it is not and can’t find why.

When component is rendered I got: Invalid handler for event "click": got undefined

List:

<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)
      },

When I will just click, I got Announcement in edit snf div with form is shown, I can use save(ajax), cancel (just set inedit to null) etc. but as soon as I touch any input inside edit div I got: [Vue warn]: Invalid handler for event "click": got undefined vue.common.js?e881:1559 Uncaught (in promise) TypeError: Cannot read property 'invoker' of undefined and as soon as I get errors, any button in edition is not working at all.

Full error stack:

warn	@	vue.common.js?e881:2658
updateListeners	@	vue.common.js?e881:1527
updateDOMListeners	@	vue.common.js?e881:4553
invokeCreateHooks	@	vue.common.js?e881:3951
createElm	@	vue.common.js?e881:3922
updateChildren	@	vue.common.js?e881:4097
patchVnode	@	vue.common.js?e881:4159
updateChildren	@	vue.common.js?e881:4084
patchVnode	@	vue.common.js?e881:4159
updateChildren	@	vue.common.js?e881:4076
patchVnode	@	vue.common.js?e881:4159
patch	@	vue.common.js?e881:4272
Vue._update	@	vue.common.js?e881:1734
(anonymous function)	@	vue.common.js?e881:1707
get	@	vue.common.js?e881:736
run	@	vue.common.js?e881:805
flushSchedulerQueue	@	vue.common.js?e881:623
nextTickHandler	@	vue.common.js?e881:401
```

The same div is used for new/edit and is working perfectly fine for new annoucement.
Any ideas? I don't think there is any error in my code as I really have exactly the same logic in another component and it is working perfectly fine.
Whole JS/HTML are inside the same Vue file.

[Dafrok]

If you define a member of data or props as the same name with your handler, it will be broken.

For example, clicking that FOO button causes an error with the message: Invalid handler for event "click": got null

<template>
<div @click="edit">FOO</div>
</template>

<script>
export default {
  data () {
    return {edit: null}
  },
  methods: {
    edit () { /* do something */ }
  }
}
</script>

[Soumit-the-billionaire]

check whether you have written method or methods ???