CODEWITHSUNDEEP
javascriptvue.jssingle-page-application
Marek Urbanowicz
Marek Urbanowicz

Reputation: 13644

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

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

Upvotes: 11

Views: 61854

Answers (5)

RaviStrs
RaviStrs

Reputation: 614

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.

Upvotes: 4

swanf
swanf

Reputation: 109

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

Upvotes: 1

Doug Wilhelm
Doug Wilhelm

Reputation: 796

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

Upvotes: 3

Marek Urbanowicz
Marek Urbanowicz

Reputation: 13644

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

Upvotes: 13

GuyC
GuyC

Reputation: 6574

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>

Upvotes: 0

Related Questions