Vue: $emit dengan banyak argumen kehilangan data dengan pendengar sebaris menggunakan $event

Dibuat pada 26 Apr 2017 · 3Komentar · Sumber: vuejs/vue

Versi: kapan

2.2.6

Tautan reproduksi

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

Langkah-langkah untuk mereproduksi

Komponen memancarkan dengan beberapa argumen untuk payload: $emit('event', first, second, arbitrary) , sesuai dokumentasi .
Orang tua mendengarkan acara melalui pernyataan sebaris @event="listener($event)" .
Perhatikan bagaimana pendengar tidak mendapatkan muatan penuh, tetapi hanya nilai pertama.

Apa yang diharapkan?

Muatan acara penuh, baik sebagai larik atau cara lain.

Apa yang sebenarnya terjadi?

Hanya nilai pertama yang dilewatkan.

Saya mengalami ini dengan membuat daftar komponen dengan v-for , mendengarkan suatu acara dan saya harus meneruskan parameter index ke pendengar: @event="listener(index, $event) .

Mungkin kasus penggunaan saya dimaksudkan untuk diselesaikan secara berbeda (atribut data terikat?!), jika demikian, saya tidak keberatan dengan beberapa panduan.

Sumber

tomsseisums

👍10

Komentar yang paling membantu

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

Perhatikan sintaks spread akan ditranspilasikan saat menggunakan komponen *.vue , tetapi tidak jika Anda menggunakan kompilasi dalam browser.

yyx990803 pada 27 Apr 2017

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

Semua 3 komentar

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

Perhatikan sintaks spread akan ditranspilasikan saat menggunakan komponen *.vue , tetapi tidak jika Anda menggunakan kompilasi dalam browser.

yyx990803 pada 27 Apr 2017

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

Apakah ...arguments masih bekerja untuk orang-orang? Ketika saya menjalankan @myevent="$emit('myevent', ...arguments)" untuk memancarkan kembali dan acara saya mendapatkan kesalahan di konsol TypeError: "vm is undefined" menggunakan vue-template-compiler dan vue.

Ini adalah bagian dari kode saya yang ditranskripsi yang merupakan sumber kesalahan

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

Dan ini adalah bagian dari kode Vue yang sebenarnya melempar TypeError pada baris ke-5 vm._events[lowerCaseEvent] . Saya pikir itu karena void 0 atas menyetel undefined ke nilai vm bawah. Adakah ide dari mana masalahnya berasal?

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 pada 1 Mei 2020

👍6

@yyx990803 Saya melihat kesalahan yang sama dengan @rightaway ketika mencoba menggunakan ...argumen - apakah ada keajaiban baru untuk digunakan atau apakah ini memang regresi?