VueJS - Invalid handler for event "click": got undefined

Question

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.

The same div is used for new/edit and is working perfectly fine for new annoucement. Any ideas?

Whole component pastebin: http://pastebin.com/JvkGdW6H

Answer 1

Got it. It was not about top level function @click . It was about @click for the element which was becoming rendered when top level click was invoked. I had a misspelling in the function name. Unfortunately, Vue is not throwing the name of the missing function and that's the reason why I could not find it because I was looking in wrong place...

Answer 2

I also encountered this error with "@vue/cli-service": "^3.9.0". The cause was a child component requiring a function prop, which was not being passed.

Based on this, I would suggest inspecting the child component in question (if applicable) to ensure required props are being passed:

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

Answer 3

I have got the similar error when the click function was implemented as computed function. Problem got resolved after the function got moved as a method rather than computed. This is not an answer but just updating my observation.