Vue: $ emit con múltiples argumentos pierde datos con el oyente en línea utilizando $ event

Creado en 26 abr. 2017 · 3Comentarios · Fuente: vuejs/vue

Versión

2.2.6

Enlace de reproducción

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

pasos para reproducir

El componente emite con múltiples argumentos para la carga útil: $emit('event', first, second, arbitrary) , según la documentación .
El padre escucha el evento a través de la declaración en línea @event="listener($event)" .
Observe cómo el oyente no obtiene la carga útil completa, sino solo el primer valor.

¿Lo que es esperado?

Carga útil completa del evento, ya sea como una matriz o por otros medios.

¿Qué está pasando realmente?

Solo se pasa el primer valor.

Me encontré con esto creando una lista de componentes con v-for , escuchando un evento y tuve que pasar el parámetro index al oyente: @event="listener(index, $event) .

Tal vez mi caso de uso esté destinado a resolverse de manera diferente (¡¿atributo de datos vinculados?!), Si es así, no me importaría una guía.

Fuente

tomsseisums

👍10

Comentario más útil

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

Tenga en cuenta que la sintaxis de propagación se transpilará cuando utilice componentes *.vue , pero no si utiliza la compilación en el navegador.

yyx990803 en 27 abr. 2017

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

Todos 3 comentarios

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

Tenga en cuenta que la sintaxis de propagación se transpilará cuando utilice componentes *.vue , pero no si utiliza la compilación en el navegador.

yyx990803 en 27 abr. 2017

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

¿ ...arguments sigue funcionando para las personas? Cuando ejecuto @myevent="$emit('myevent', ...arguments)" para volver a emitir un evento, aparece un error en la consola TypeError: "vm is undefined" usando el último vue-template-compiler y vue.

Esta es la parte de mi código transpilado que es la fuente del error.

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

Y esta es la parte del código de Vue que arroja el TypeError en la quinta línea vm._events[lowerCaseEvent] . Creo que se debe a que void 0 anterior está configurando undefined al valor de vm continuación. ¿Alguna idea de dónde viene el problema?

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
  };