访问承诺中的数组值

Question

我已经从子代中发出值，并在父代中返回值，但当我试图访问它时，它打印给我的只是空白数组吗？我过去没有处理过承诺，所以我不太了解......我知道一些关于async和await方法的东西......但我不知道如何将这个函数捆绑到这个函数中.提前感谢您的帮助。

这是我有的...

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