web-dev-qa-db-ja.com

VueJS-イベント「クリック」の無効なハンドラー：未定義になりました

クリックしたときに編集したい要素のリストがあります。私は他のコンポーネントにも同様の解決策があり、それは完全にうまく機能していますが、新しいものではそれができず、理由を見つけることができません。

コンポーネントがレンダリングされると、次のようになります：_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がnew/editに使用され、新しいアナウンスに対して完全に正常に機能しています。何か案は？

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

javascriptvue.jssingle-page-application
6
Marek Urbanowicz

とった。それはトップレベルの関数ではありません@click。それは〜についてだった @clickトップレベルのクリックが呼び出されたときにレンダリングされていた要素。関数名にスペルミスがあります。残念ながら、Vueは不足している関数の名前をスローしていません。それが、間違った場所を探していたために見つからなかった理由です...

6
M U

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

以下は例として役立つかもしれません...

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

"@vue/cli-service": "^3.9.0"でもこのエラーが発生しました。 原因は、渡されなかった、関数の小道具を必要とする子コンポーネントでした。

これに基づいて、問題の子コンポーネント（該当する場合）を調べて、必要な小道具が渡されていることを確認することをお勧めします。

cancel_action: {
  type: Function,
  required: true
},
0
Doug Wilhelm