在承诺中访问数组值

Question

我已经从子项中发出值并返回父项中的值，但是当我尝试访问它时它只打印空白数组？我过去没有处理过承诺，所以我对此不太了解……我对异步和等待方法有所了解……但我不知道如何将此功能捆绑到此。预先感谢您的帮助。

这就是我的...

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

您可以在 then 中执行 emit:

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

在承诺中访问数组值

Access array value in promise

vue.js

vue-resource

vue-component

vuex

vuejs2