Vue: $emit mit mehreren Argumenten verliert Daten mit dem Inline-Listener, der $event verwendet

Erstellt am 26. Apr. 2017  ·  3Kommentare  ·  Quelle: vuejs/vue

Ausführung

2.2.6

Reproduktionslink

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

Schritte zum Reproduzieren

  • Komponente gibt mehrere Argumente für die Nutzlast aus: $emit('event', first, second, arbitrary) , gemäß Dokumentation .
  • Parent hört das Ereignis über die Inline-Anweisung @event="listener($event)" .
  • Beachten Sie, dass listener nicht die volle Nutzlast erhält, sondern nur den ersten Wert.

Was wird erwartet?

Vollständige Ereignisnutzlast, entweder als Array oder auf andere Weise.

Was passiert eigentlich?

Es wird nur der erste Wert übergeben.


Ich stieß darauf, indem ich eine Liste von Komponenten mit v-for , ein Ereignis anhörte und den Parameter index an den Listener übergeben musste: @event="listener(index, $event) .

Vielleicht soll mein Anwendungsfall anders gelöst werden (gebundenes Datenattribut?!), wenn ja, hätte ich nichts gegen eine Anleitung.

Hilfreichster Kommentar

Verwenden Sie arguments : https://jsfiddle.net/50wL7mdz/30115/

Beachten Sie, dass die Spread-Syntax transpiliert wird, wenn Sie *.vue Komponenten verwenden, jedoch nicht, wenn Sie die browserinterne Kompilierung verwenden.

Alle 3 Kommentare

Verwenden Sie arguments : https://jsfiddle.net/50wL7mdz/30115/

Beachten Sie, dass die Spread-Syntax transpiliert wird, wenn Sie *.vue Komponenten verwenden, jedoch nicht, wenn Sie die browserinterne Kompilierung verwenden.

Arbeitet ...arguments noch immer für Menschen? Wenn ich @myevent="$emit('myevent', ...arguments)" ausführe, um eine erneute Ausgabe und ein Ereignis auszuführen, erhalte ich einen Fehler in der Konsole TypeError: "vm is undefined" , wenn der neueste vue-template-compiler und vue verwendet werden.

Dies ist der Teil meines transpilierten Codes, der die Fehlerquelle ist

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

Und dies ist der Teil des Vue-Codes, der den TypeError in der fünften Zeile vm._events[lowerCaseEvent] auslöst. Ich denke, es liegt daran, dass void 0 oben undefined auf den Wert von vm unten setzt. Irgendeine Idee woher das Problem kommt?

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

@yyx990803 Ich @rightaway, wenn

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen