Problem mit dem Ausgeben von Ereignissen in Vue mit eventHub

Question

Ich habe eine Komponente, die zu einem bestimmten Zeitpunkt in ihrem Leben ein Ereignis ausgeben muss. Dieses Ereignis wird von einer Geschwisterkomponente gehört.

Ich verwende einen Event-Hub für diese Kommunikation.

Allerdings bekomme ich eine Uncaught TypeError beim Versuch, eventHub.$emit('EventName') aufrufen.

Hier ist der vollständige Fehler in der Konsole erhalten.

vue.js?3de6:2400 Uncaught TypeError: cbs[i].apply is not a function 
at Vue$3.Vue.$emit (eval at <anonymous> (http://rounds.smaa.app:8000/js/app.js:322:1), <anonymous>:2400:16) 
at Vue$3.e.(anonymous function) [as $emit] (chrome-extension://nhdogjmejiglipccpnnnanhbledajbpd/build/backend.js:1:6235) 
at VueComponent.importPlayers (eval at <anonymous> (http://rounds.smaa.app:8000/js/app.js:178:1), <anonymous>:98:64) 
at Proxy.boundFn (eval at <anonymous> (http://rounds.smaa.app:8000/js/app.js:322:1), <anonymous>:130:14) 
at Object.change [as fn] (eval at <anonymous> (http://rounds.smaa.app:8000/js/app.js:261:1), <anonymous>:118:13) 
at HTMLInputElement.eval (eval at <anonymous> (http://rounds.smaa.app:8000/js/app.js:322:1), <anonymous>:2229:16) 

Hier ist der Code, der den Fehler verursacht:

importPlayers(e) { 

    eventHub.$emit('AdminAddedPlayers'); 

    this.importing = true; 
    this.success.import = false; 
    ... 
    ... 
} 

Es scheint nicht mit der Komponente andere Probleme zu sein, aber hier ist die vollständige Komponente und die eventHub:

assets/js/components/Admin/AdminImportPlayersComponent

<template> 
<div class="component"> 
    <!-- removed some boilerplate markup for brevity --> 

    <template v-if="! importing && ! warning.invalid_data_submitted"> 
     <h4>Import Players</h4> 
     <div class="form-group" :class="error.import ? 'has-error' : ''"> 
      <input type="file" @change="importPlayers($event)" id="file" class="form-control"> 
      <div v-if="error.import" class="help-block danger"> 
       You need to select a valid excel file. 
      </div> 
     </div> 
    </template> 
</div> 
</template> 

<script> 
import eventHub from '../../../events.js'; 
export default { 
    data() { 
     return { 
      importing: false, 
      error: { 
       import: false, 
       other: false, 
      }, 
      warning: { 
       invalid_data_submitted: false, 
       invalid_fixed_data_submitted: false 
      }, 
      success: { 
       import: false 
      }, 
      invalid_players: [], 
      teams: [], 
      loader_color: '#0d0394' 
     } 
    }, 
    methods: { 
     importPlayers(e) { 

      eventHub.$emit('AdminAddedPlayers'); 

      this.importing = true; 
      this.success.import = false; 

      var formData = new FormData(); 
      formData.append('players', e.target.files[0]); 

      return this.$http.post('/admin/players/import', formData).then((response) => { 
       if (response.data.invalid_player_data.length) { 
        this.invalid_players = response.data.invalid_player_data; 
        this.warning.invalid_data_submitted = true; 
        this.getTeams(); 
       } else { 
        this.success.import = true; 
       } 
       this.importing = false; 
       this.error.import = false; 
       this.error.other = false; 
      }, (response) => { 
       if (response.data.players) { 
        this.error.import = true; 
       } else { 
        this.error.other = true; 
       } 
       this.importing = false; 
       this.warning.invalid_data_submitted = false; 
       this.success.import = false; 
      }); 
     }, 
     submitFixedPlayers() { 

      eventHub.$emit('AdminAddedPlayers'); 

      this.importing = true; 

      return this.$http.post('/admin/players/import/fixed', { 
       players: this.invalid_players 
      }).then((response) => { 
       // conditionals 


      }, (response) => { 
       this.importing = false; 
      }); 
     }, 
     getTeams() { 
      return this.$http.get('/admin/teams/fetch').then((response) => { 
       // team stuff 
      }); 
     }, 
     setDefaultTeams() { 
      // setting default teams 
     } 
    } 
} 

Vermögenswerte/js/events.js

module.exports = new Vue() 

Die Vue Quellen auf diesem Code in Vue:

Vue.prototype.$emit = function (event) { 
    var vm = this; 
    var cbs = vm._events[event]; 
    if (cbs) { 
     cbs = cbs.length > 1 ? toArray(cbs) : cbs; 
     var args = toArray(arguments, 1); 
     for (var i = 0, l = cbs.length; i < l; i++) { 
      cbs[i].apply(vm, args); 
     } 
     } 
    return vm 
    }; 

Answer 1

Lösung

Wenn $on mit an Veranstaltungen durch die emittierte hören eventHub, habe ich festgestellt, dass Sie Argumente wie folgt nicht übergeben können:

vm.$on('Event', this.callback(arg1)); 

Das scheint eine TypeError zu werfen.

Die docs erwähnen, dass alle übergebenen Argumente zu $emit, etwa so:

vm.$emit('Event', args); 

werden automatisch in die $on Rückruf übergeben werden.

So ist der folgende Code korrekt ist (und arbeitet für mich):

vm.$emit('AdminAddedPlayers', 1) 

vm.$on('AdminAddedPlayers', this.callback); 

Wenn er ausgeführt wird, der Aufruf von callback von $on ist so etwas wie:

this.callback(arg); 

Wo arg geben wird in von $emit.