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

Sanctuary

might be some small mistake, better if you post the whole component structure. – Beastly

Whole component: pastebin.com/JvkGdW6H – Sanctuary

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

Sanctuary

Answer 2

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.

Backspace

Answer 3

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

Seeing

Answer 4

I've just solved this problem. Probably you have mispelled the function name, pay attention to the letter cases.

Sovereignty

Answer 5

I didn't really follow the question, might be a good to post a more complete example. However it looks like you need to utilise the index of the item. This should help you in grabbing the correct item. That said if the click event is undefined then it sounds like its not registered on that component.

The below may help as an example...

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>

Dimpledimwit

yeah if you have a bug in the component the above won't fix that, more an example for how to refactor. If you post the complete component then we can troubleshoot it. – Dimpledimwit