Vue: $emit avec plusieurs arguments perd des données avec l'écouteur en ligne utilisant $event

Créé le 26 avr. 2017 · 3Commentaires · Source: vuejs/vue

Version

2.2.6

Lien de reproduction

https://jsfiddle.net/psycketom/50wL7mdz/29927/

Étapes à reproduire

Le composant émet avec plusieurs arguments pour la charge utile : $emit('event', first, second, arbitrary) , selon la documentation .
Le parent écoute l'événement via l'instruction en ligne @event="listener($event)" .
Remarquez que l'auditeur n'obtient pas la pleine charge utile, mais seulement la première valeur.

Qu'est-ce qui est attendu ?

Charge utile complète de l'événement, sous forme de tableau ou d'autres moyens.

Que se passe-t-il réellement ?

Seule la première valeur est transmise.

J'ai rencontré cela en créant une liste de composants avec v-for , en écoutant un événement et j'ai dû passer le paramètre index à l'auditeur : @event="listener(index, $event) .

Peut-être que mon cas d'utilisation est censé être résolu différemment (attribut de données liées ?!), si c'est le cas, cela ne me dérangerait pas d'avoir des conseils.

Source

tomsseisums

👍10

Commentaire le plus utile

Utilisez arguments : https://jsfiddle.net/50wL7mdz/30115/

Notez que la syntaxe de propagation sera transpilée lors de l'utilisation *.vue composants

yyx990803 le 27 avr. 2017

👍92 ❤14 🎉12 🚀6 😄4 😕2 👎2 👀1

Tous les 3 commentaires

Utilisez arguments : https://jsfiddle.net/50wL7mdz/30115/

Notez que la syntaxe de propagation sera transpilée lors de l'utilisation *.vue composants

yyx990803 le 27 avr. 2017

👍92 ❤14 🎉12 🚀6 😄4 😕2 👎2 👀1

Est-ce que ...arguments fonctionne toujours pour les gens ? Lorsque j'exécute @myevent="$emit('myevent', ...arguments)" pour réémettre et événement, j'obtiens une erreur dans la console TypeError: "vm is undefined" utilisant le dernier vue-template-compiler et vue.

C'est la partie de mon code transpilé qui est la source de l'erreur

            on: {
              myevent: function($event) {
                var i = arguments.length,
                  argsArray = Array(i)
                while (i--) argsArray[i] = arguments[i]
                return _vm.$emit.apply(
                  void 0,
                  ["myevent"].concat(argsArray)
                )
              }
            }

Et c'est la partie du code Vue qui renvoie réellement le TypeError sur la 5ème ligne vm._events[lowerCaseEvent] . Je pense que c'est parce que le void 0 ci-dessus définit undefined à la valeur de vm ci-dessous. Une idée d'où vient le problème ?

Vue.prototype.$emit = function (event) {
    var vm = this;
    if (process.env.NODE_ENV !== 'production') {
      var lowerCaseEvent = event.toLowerCase();
      if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
        tip(
          "Event \"" + lowerCaseEvent + "\" is emitted in component " +
          (formatComponentName(vm)) + " but the handler is registered for \"" + event + "\". " +
          "Note that HTML attributes are case-insensitive and you cannot use " +
          "v-on to listen to camelCase events when using in-DOM templates. " +
          "You should probably use \"" + (hyphenate(event)) + "\" instead of \"" + event + "\"."
        );
      }
    }
    var cbs = vm._events[event];
    if (cbs) {
      cbs = cbs.length > 1 ? toArray(cbs) : cbs;
      var args = toArray(arguments, 1);
      var info = "event handler for \"" + event + "\"";
      for (var i = 0, l = cbs.length; i < l; i++) {
        invokeWithErrorHandling(cbs[i], vm, args, vm, info);
      }
    }
    return vm
  };

rightaway le 1 mai 2020

👍6

@yyx990803 Je vois la même erreur que @rightaway lorsque j'essaie d'utiliser ... des arguments - y a-t-il une nouvelle magie à utiliser ou s'agit-il bien d'une régression?