Доступ к значению массива в обещании

Question

Я передал значение из дочернего элемента и вернул значение в родительском элементе, но когда я пытаюсь получить доступ, он выводит мне только пустой массив? Я не имел дела с обещаниями в прошлом, поэтому я мало что знаю об этом ... Я кое-что знаю об asyn c и методе await ... но я не знаю, как включить эту функцию в this. Заранее спасибо за вашу помощь.

Это то, что у меня есть ...

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>

печать. 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

Вы можете просто ввести emit в 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;
    });