VueJS - イベント "click"の無効なハンドラ：未定義です

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）を使うことができます。キャンセル（nullに設定してください）などですが、編集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が使用され、新しい通知のために完全に正常に動作しています。 アイデア

コンポーネント全体のペーストビン：http://pastebin.com/JvkGdW6H

Answer 1

はそれを手に入れました。トップレベルの機能ではありません@click。 トップレベルのクリックが呼び出されたときにレンダリングされていた要素の約@clickでした。関数名のスペルミスがありました。 残念ながら、Vueは欠落している機能の名前を投げていないので、間違った場所を探していたので見つからなかったのです...

Answer 2

私は本当に多くの完全な例を投稿するには良いかもしれません、質問に従っていませんでした。ただし、アイテムのインデックスを利用する必要があるようです。これは、正しい項目をつかむのに役立ちます。クリックイベントが定義されていない場合、そのコンポーネントに登録されていないように見えます。

下記の例として役立つかもしれない...

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>