Access array value in promise

Question

I have emited value from the child and returning the value in a parent, but when I'm trying to access it prints me just blank array? I haven't dealt with promises in the past, so I don't know much about that...I know something about async and await method..but I don't know how to bundle this function into this. Thanks in advance for your help.

This is what I have...

insertMessage.vue

 export default {
        data(){
            return{
                message:'',
                isLoading:false,
            }
        },

        methods:{
            addMessage(){
                if(this.message !=''){
                    this.sendData();
                } else{
                }
            },
            sendData(){
                this.isLoading = true;
                this.$http.post('/add-message' , {message:this.message, id_rooms:this.$route.params.id_rooms}).then((response) => {
                    console.log(response.json());
                    if(response.body != 'Error'){
                        this.message = '';
                        this.$root.$emit('new_message', response.json());
                    } else{
                        this.isLoading = false;
                    }
                }, (response) =>{
                    this.isLoading = false;
                });
            }
        }
    }
</script>

print.vue

<template>
                            <div class="msg_history">
                                <get_message :messages="messages"></get_message>
                                <add_message></add_message>
                            </div>

</template>

<script>
    import addMessage from './add-message';
    import getMessage from './get-messages';


    export default {
        components: {
            get_message: getMessage,
            add_message: addMessage,
        },
        data() {
            return {
                messages: []
            }

        },
        mounted(){
                this.$root.$on('new_message', (data) => {
                    this.messages.push(data);
                });
        },

    }
</script>

fetchMessages.vue

<template>
    <div class="incoming_msg">
        <div class="received_msg">
            <div v-for="message in messages" class="received_withd_msg">
                {{message.created}} //This is what I want
                {{message}} //This is working but print just { "promise": {} }
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        props:['messages'],

        data(){
            return{
            }
        }
    }
</script>

Answer 1

You can just do emit in then:

    this.$http.post('/add-message' , {message:this.message, id_rooms:this.$route.params.id_rooms}).then((response) => {
        if(response.body != 'Error'){
            response.json().then( json => {
                this.message = '';
                console.log(json);
                this.$root.$emit('new_message', json); 
            });
        } else {
            this.isLoading = false;
        }
    }, (response) => {
        this.isLoading = false;
    });