Vuejs $ emitがコールバックで親の関数をトリガーしなかった

Question

私の質問はちょうどこのようなものです：Vuejs $emit doesn't fire on callback。 私はプロジェクトでスーパーエージェントを使用しました。ここに私のコードは次のとおりです。

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

リクエストが成功したが、トリガー「savevideo」、親のメソッド「toSaveVideoは」何も印刷されませんでした。しかし、私がコールバックの外にemitを置くと、すべてが問題ありません。 $ emitイベントがコールバックで起動しないのはなぜですか？

Answer 1

私はそれを理解しました。

'v-if'が子コンポーネントにバインドされています。

私のプロジェクトでは、子コンポーネントには、この子コンポーネントを閉じるためのもう1つのトリガー 'close'があり、コールバックの外に出されたため、問題が発生しました。

//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! 
    } 
}