web-dev-qa-db-fra.com

VueJS - Gestionnaire non valide pour l'événement "clic": obtenu non défini

J'ai une liste d'éléments que je souhaite modifier lorsque je clique dessus. J'ai une solution similaire dans d'autres composants et cela fonctionne parfaitement bien, mais dans un nouveau, ce n'est pas le cas et je ne trouve pas pourquoi.

Lorsque le composant est rendu, j'ai obtenu: Invalid handler for event "click": got undefined

Liste:

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

Quand je vais juste cliquer, j'ai reçu l'annonce en édition snf div avec le formulaire est affiché, je peux utiliser save (ajax), annuler (juste définir inedit à null) etc. mais dès que je touche n'importe quelle entrée dans edit div, j'ai obtenu: [Vue warn]: Invalid handler for event "click": got undefinedvue.common.js?e881:1559 Uncaught (in promise) TypeError: Cannot read property 'invoker' of undefined et dès que je reçois des erreurs, aucun bouton en édition ne fonctionne du tout.

Le même div est utilisé pour new/edit et fonctionne parfaitement pour une nouvelle annonce. Des idées?

Composant entier Pastebin: http://Pastebin.com/JvkGdW6H

javascriptvue.jssingle-page-application
6
Marek Urbanowicz

Je l'ai. Il ne s'agissait pas d'une fonction de niveau supérieur @click. C'était à propos de @click pour l'élément qui devenait rendu lorsque le clic de niveau supérieur était invoqué. J'ai eu une faute d'orthographe dans le nom de la fonction. Malheureusement, Vue ne lance pas le nom de la fonction manquante et c'est la raison pour laquelle je ne l'ai pas trouvée car je cherchais au mauvais endroit ...

6
M U

Je n'ai pas vraiment suivi la question, ce serait peut-être bien de publier un exemple plus complet. Cependant, il semble que vous devez utiliser l'index de l'élément. Cela devrait vous aider à saisir le bon article. Cela dit, si l'événement click n'est pas défini, il semble qu'il ne soit pas enregistré sur ce composant.

Ce qui suit peut aider à titre d'exemple ...

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

J'ai également rencontré cette erreur avec "@vue/cli-service": "^3.9.0". La cause était un composant enfant nécessitant un accessoire de fonction, qui n'était pas transmis.

Sur cette base, je suggère d'inspecter le composant enfant en question (le cas échéant) pour s'assurer que les accessoires requis sont passés:

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