Vue: $ emit com vários argumentos perde dados com ouvinte inline utilizando $ event

Criado em 26 abr. 2017 · 3Comentários · Fonte: vuejs/vue

Versão

2.2.6

Link de reprodução

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

Passos para reproduzir

O componente emite com vários argumentos para a carga útil: $emit('event', first, second, arbitrary) , conforme a documentação .
O pai ouve o evento por meio da instrução inline @event="listener($event)" .
Observe como o ouvinte não obtém a carga útil total, mas apenas o primeiro valor.

O que é esperado?

Carga útil total do evento, como um array ou outros meios.

O que realmente está acontecendo?

Apenas o primeiro valor é passado.

Eu encontrei isso criando uma lista de componentes com v-for , ouvindo um evento e tive que passar o parâmetro index para o ouvinte: @event="listener(index, $event) .

Talvez meu caso de uso deva ser resolvido de forma diferente (atributo de dados vinculados ?!), se assim for, eu não me importaria com alguma orientação.

Fonte

tomsseisums

👍10

Comentários muito úteis

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

Observe que a sintaxe de propagação será transpilada ao usar componentes *.vue , mas não se você usar compilação no navegador.

yyx990803 em 27 abr. 2017

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

Todos 3 comentários

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

Observe que a sintaxe de propagação será transpilada ao usar componentes *.vue , mas não se você usar compilação no navegador.

yyx990803 em 27 abr. 2017

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

...arguments ainda está trabalhando para as pessoas? Quando executo @myevent="$emit('myevent', ...arguments)" para reemitir um evento, recebo um erro no console TypeError: "vm is undefined" usando o compilador de modelo de vue e o vue mais recentes.

Esta é a parte do meu código transpilado que é a fonte do erro

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

E esta é a parte do código Vue que realmente lança o TypeError na 5ª linha vm._events[lowerCaseEvent] . Acho que é porque void 0 acima está definindo undefined com o valor de vm abaixo. Alguma ideia de onde está vindo o 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
  };

rightaway em 1 mai. 2020

👍6

@ yyx990803 Estou vendo o mesmo erro de @rightaway ao tentar usar ... argumentos - há alguma nova mágica para usar ou isso é mesmo uma regressão?