I have a method in child ponent which is responsible to get the data from server and after receiving the data, i am trying to emit the data to parent. The below method is from Vueponent (child). The problem is, parent ponent is not able to receive the emitted data. Just to check, I moved the $emit code outside axios request call, then it is working. If i $emit from inside axios, it is not working.

Not working (emit from inside axios):

methods:{
    methodName: function(){
        let self = this;
        axios.get('url')
        .then(function(response){
            if (response.data.res) {
                console.log('response is true, i can see this message');
                self.$emit('updateparentdata',response.data);
            }
        });
        self.$emit('close');
    }
},

Working (emit from outside axios):

methods:{
    methodName: function(){
        let self = this;
        self.$emit('updateparentdata','some dummy data');
        axios.get('url')
        .then(function(response){
            if (response.data.res) {

            }
        });
        self.$emit('close');
    }
},

This is my ponent code in my html page, if something is emitted from updateparentdata, then it will call 'updateData' function in parent vue.

<modal 
    v-if="showModal"
    @close="showModal = false"
    v-on:updateparentdata="updateData">
</modal>

This is my method in parent vue,

updateData: function(response){
    console.log(response);
},

This method is not triggered after i emitted the data from child ponent. If i emit data outside axios, then this method is called, but if i emit data from inside axios, this method is not called.

I have a method in child ponent which is responsible to get the data from server and after receiving the data, i am trying to emit the data to parent. The below method is from Vue.ponent (child). The problem is, parent ponent is not able to receive the emitted data. Just to check, I moved the $emit code outside axios request call, then it is working. If i $emit from inside axios, it is not working.

Not working (emit from inside axios):

methods:{
    methodName: function(){
        let self = this;
        axios.get('url')
        .then(function(response){
            if (response.data.res) {
                console.log('response is true, i can see this message');
                self.$emit('updateparentdata',response.data);
            }
        });
        self.$emit('close');
    }
},

Working (emit from outside axios):

methods:{
    methodName: function(){
        let self = this;
        self.$emit('updateparentdata','some dummy data');
        axios.get('url')
        .then(function(response){
            if (response.data.res) {

            }
        });
        self.$emit('close');
    }
},

This is my ponent code in my html page, if something is emitted from updateparentdata, then it will call 'updateData' function in parent vue.

<modal 
    v-if="showModal"
    @close="showModal = false"
    v-on:updateparentdata="updateData">
</modal>

This is my method in parent vue,

updateData: function(response){
    console.log(response);
},

This method is not triggered after i emitted the data from child ponent. If i emit data outside axios, then this method is called, but if i emit data from inside axios, this method is not called.

• javascript
• vuejs2
• vue-ponent
• axios

Share Improve this question Follow edited May 25, 2017 at 22:12 Rubanraj Ravichandran asked May 25, 2017 at 20:42 Rubanraj RavichandranRubanraj Ravichandran 1,29322 gold badges1717 silver badges2626 bronze badges 4

• Are you sure that response.data.res is true? – thanksd Commented May 25, 2017 at 20:58
• Yes, i checked it with console.log message. response.data.res is true. I modified my code with console.log statement, can you pls check it. @thanksd – Rubanraj Ravichandran Commented May 25, 2017 at 21:02
• 2 I can't reproduce your issue. See this fiddle: jsfiddle/nxcne6zr – thanksd Commented May 25, 2017 at 21:12
• I figured out what was the problem and provided the fix below. Thanks for your contribution. @thanksd – Rubanraj Ravichandran Commented May 31, 2017 at 14:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Thanks for your answers.

I found what the problem is, I was calling $emit('close') function outside axios call.

Since axios call is asynchronous, after making the request, $emit('close') which is outside axios instance actually closes my modal window which removes my whole ponent instance.

Thats why this $emit('updateparentdata') function inside axios call was not worked performed as expected.

Solution 1:

I moved the $emit('close') inside axios request, so after receiving the response I am closing the modal window.

methods:{
    methodName: function(){
        let self = this;
        axios.get('url')
        .then(function(response){
            if (response.data.res) {
                console.log('response is true, i can see this message');
                self.$emit('updateparentdata',response.data);
                self.$emit('close');
            }
        });
    }
},

Solution 2:

As mentioned by @Matija Župančić, I tried with Vue.nextTick to wait for the updates. This method also worked.

Use Vue.nextTick to wait for updates.

Try this inside axios :

this.$nextTick(() => {
  self.$emit('close');
});

as @RubanrajRavichandran mentioned in his Solution 1 where self = this its because in the axios .then the this changes. you can instead use arrow function like .then((response) => {} and this will work so you don't have to use self