Vuejs $emit didn't trigger parent's function on callback

Question

My question is just like this one:Vuejs $emit doesn't fire on callback. But I used the superagent in my project. Here is my code:

//Parent.vue
<Child v-on:savevideo="toSaveVideo"/>
...
methods:{
  toSaveVideo:function(data){
    console.log('add');
  }
}

//Child.vue
<button @click="toAdd">Add</button>
...
methods:{
  toAdd:function(){
    ...
    let self = this;
    superagent
      .get(url)
      .query({data:data})
      .end(function(err,res){
        //trigger parent function
        let resData = res.body.data;
        self.$emit('savevideo',resData);
    })
  }
}

The request is successful but when trigger 'savevideo', the method 'toSaveVideo' in parent didn't print anything. However, when I put the emit outside the callback, everything is fine. Why does the $emit event not fire in a callback?

Answer 1

ok, I figured it out.

'v-if' is bound on the child component.

Because in my project, in the child component, there is another trigger 'close' to close this child component, and it was emitted outside the callback, and this caused the problem.

//Parent.vue
<Child v-on:savevideo="toSaveVideo" v-if="showChild" v-on:close="toClose"/>
...
methods:{
  toClose:function(){
    this.showChild = false;
  }
}

//Child.vue
<button @click="toAdd">Add</button>
...
methods:{
  toAdd:function(){
    ...
    let self = this;
    superagent
      .get(url)
      .query({data:data})
      .end(function(err,res){
        //trigger parent function
        let resData = res.body.data;
        self.$emit('savevideo',resData);
        //'close' should be emitted here!
    })
    this.$emit('close'); //bad code!! This cause the problem!
  }
}