VueJS - Недопустимый обработчик события «click»: получил undefined

Question

У меня есть список элементов, которые я хочу изменить, когда вы нажимаете. У меня есть аналогичное решение в другом компоненте, и он работает отлично, но в новой он не является и не может найти почему.

Когда компонент визуализируется я получил: Invalid handler for event "click": got undefined

Список:

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

Когда я просто нажмите, я получил объявление в редактировать SNF DIV с формой , я могу использовать save (ajax), отменить (просто установить inedit на null) и т. д., но как только я коснуюсь любого ввода внутри edit div, я получил: [Vue warn]: Invalid handler for event "click": got undefined vue.common.js?e881:1559 Uncaught (in promise) TypeError: Cannot read property 'invoker' of undefined и как только я получаю ошибки, любая кнопка в редакции не работает вообще.

Тот же div используется для новых/редактирования и отлично работает для нового аннуляции. Любые идеи?

Всего компонент Pastebin: http://pastebin.com/JvkGdW6H

Answer 1

Понял. Речь шла не о функции верхнего уровня @click. Это было около @click для элемента, который становился визуализируемым при вызове верхнего уровня. У меня было неправильное письмо в имени функции. К сожалению, Vue не выбрасывает имя отсутствующей функции, и именно поэтому я не смог найти его, потому что искал не то место ...

Answer 2

Я действительно не следовать вопрос, может быть хорошим, чтобы опубликовать более полный пример. Однако похоже, что вам нужно использовать индекс элемента. Это должно помочь вам в захвате правильного предмета. Тем не менее, если событие click undefined, то это похоже на то, что он не зарегистрирован на этом компоненте.

Ниже может помочь в качестве примера ...

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    \t anns: [ 
 
    \t { state: 'none' }, 
 
     { state: 'none' }, 
 
     { state: 'none' }, 
 
    ], 
 
    }, 
 
    methods: { 
 
    \t 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>