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

might be some small mistake, better if you post the whole component structure. — JJPandari
– JJPandari, Commented Nov 21, 2016 at 2:17

Marek Urbanowicz · Accepted Answer · 2016-11-21 21:47:24Z

13

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

answered Nov 21, 2016 at 21:47

Marek Urbanowicz

13.8k19 gold badges68 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RaviStrs · Accepted Answer · 2021-02-09 16:24:59Z

4

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.

answered Feb 9, 2021 at 16:24

RaviStrs

6446 silver badges9 bronze badges

Comments

Doug Wilhelm · Accepted Answer · 2020-02-28 18:53:32Z

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

answered Feb 28, 2020 at 18:53

Doug Wilhelm

7969 silver badges27 bronze badges

Comments

Dharman · Accepted Answer · 2020-08-14 14:04:34Z

1

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

edited Aug 14, 2020 at 14:04

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Aug 14, 2020 at 13:59

swanf

1097 bronze badges

Comments

GuyC · Accepted Answer · 2016-11-20 20:52:47Z

0

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>

answered Nov 20, 2016 at 20:52

GuyC

6,6141 gold badge35 silver badges45 bronze badges

1 Comment

GuyC Over a year ago

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.

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related