Vue: 複数の引数を持つ$ emitは、$ eventを利用するインラインリスナーでデータを失います

作成日 2017年04月26日  ·  3コメント  ·  ソース: vuejs/vue

バージョン

2.2.6

複製リンク

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

再現する手順

  • コンポーネントは、ドキュメントに従って、ペイロードに対して複数の引数を使用して発行します: $emit('event', first, second, arbitrary)
  • 親はインラインステートメント@event="listener($event)"介してイベントをリッスンします。
  • リスナーが完全なペイロードを取得せず、最初の値のみを取得することに注意してください。

何が期待されますか?

配列またはその他の手段としての完全なイベントペイロード。

実際に何が起こっているのですか?

最初の値のみが渡されます。


v-forを使用してコンポーネントのリストを作成し、イベントをリッスンしてこれに遭遇し、 indexパラメーターをリスナーに渡す必要がありました: @event="listener(index, $event)

たぶん私のユースケースは別の方法で解決されることを意図しているのかもしれません(バインドされたデータ属性?!)、もしそうなら、私はいくつかのガイダンスを気にしません。

最も参考になるコメント

argumentshttps

*.vueコンポーネントを使用する場合、スプレッド構文はトランスパイルされますが、ブラウザー内コンパイルを使用する場合はトランスパイルされないことに注意してください。

全てのコメント3件

argumentshttps

*.vueコンポーネントを使用する場合、スプレッド構文はトランスパイルされますが、ブラウザー内コンパイルを使用する場合はトランスパイルされないことに注意してください。

...argumentsまだ人々のために働いていますか? @myevent="$emit('myevent', ...arguments)"を実行して再発行し、イベントを実行すると、最新のvue-template-compilerとvueを使用してコンソールTypeError: "vm is undefined"エラーが発生します。

これは、エラーの原因である私のトランスパイルされたコードの一部です

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

そしてこれは、5行目のvm._events[lowerCaseEvent] TypeErrorを実際にスローするVueコードの一部です。 上記のvoid 0undefinedを以下のvmの値に設定しているためだと思います。 問題がどこから来ているのか考えていますか?

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私は、引数... @rightawayと同じエラーを見ている-使用するいくつかの新しい魔法があるか、これは確かに回帰ですか?

このページは役に立ちましたか?
0 / 5 - 0 評価