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