Vuejs $は、次のコードでは、コールバック

Question

に発生しません発する：

remove関数が呼び出される

export default { 
    props: ['note'], 
    methods: { 
     remove(){ 
      NoteRepo.remove(this.note, (err) => { 
       if (err) { 
        console.log('Should Fire') 
        this.$emit('alerted', { 
         type: 'error', 
         message: 'Failed to remove note' 
        }); 
       } 
      }) 
     } 
    } 
} 

、コンソールログは「火べき」が、$発するイベントが発生しません。コールバックの外に$ emitを移動すると、次のようになります。

export default { 
    props: ['note'], 
    methods: { 
     remove(){ 
      this.$emit('alerted', { 
       type: 'error', 
       message: 'Failed to remove note' 
      }); 

      NoteRepo.remove(this.note, (err) => { 
       if (err) { 
        console.log('Should Fire') 
       } 
      }) 
     } 
    } 
} 

これは機能します。私は_this = thisを割り当てて、それを使って$ emitを発火させましたが、違いはありません。

$ emitイベントがコールバックで起動しないのはなぜですか？

Answer 1

したがって、問題を引き起こしたのはNoteRepoのものだったことが判明しました。特にfirebaseイベントコールバック。

constructor() { 
     super(); 

     // Initialize Firebase 
     Firebase.initializeApp({ 
      apiKey: "xxx", 
      authDomain: "xxx", 
      databaseURL: "xxx", 
      storageBucket: "xxx", 
      messagingSenderId: "xxx" 
     }); 

     this.ref = Firebase.database().ref('notes'); 
     this.attachFirebaseListeners(); 
    } 

    attachFirebaseListeners() { 
     this.ref.on('child_added', this.onAdded, this); 
     this.ref.on('child_removed', this.onRemoved); // Removing 'this' here seems to of fixed it. 
     this.ref.on('child_changed', this.onChanged, this); 
    } 

私は正確に何が間違っていたのかよくわかりませんが、これは今のところ整理されているようです。