vue.js将数据传递回组件 [英] vue.js passing data back to a component

问题描述

晚上好. 我正在使用laravel和vue.js创建聊天应用程序.我为用户列出了所有消息，但是现在我可以选择对话了，因此只要用户选择其中任何一个，就会显示特定的对话消息.我在console.log上记录了数据，每当我单击对话时，都可以看到我有一系列需要的消息，但是我不知道如何将它们传递回app.js， messages[]数组是这样，所以我可以重新渲染该组件以列出该特定对话的所有消息.这里的一些代码没有经过正确的验证，因此请忽略它，因为现在我专注于如何传递数据. 谢谢！

Good evening. I am creating a chat application with laravel and vue.js. I have all the messages listed for my user but now I made conversations selectable so whenever a user selects any of them a particular conversation messages would appear. I console.log'ed the data and whenever I click on the conversation, I can see that I have an array of messages that are needed, but I can't figure out the way how to pass them back to app.js, where messages[] array is so I could re-render the component to list all the messages for that particular conversation. Some of the code here is not properly validated so just ignore that because for now I am focusing on how to pass back the data. Thanks!

ChatConversation.vue

ChatConversation.vue

export default {
    props: ['conversation'],
    methods: {
        getMessages(conversation_id) {
            this.messages = [];
            axios.get('/messages/' + conversation_id, conversation_id).then(response => {
                console.log(response.data);
                // HOW TO SEND THEM BACK???
            });
        }
    }
}

app.js

const app = new Vue({
el: '#app',
data: {
    messages: [],
    conversations: [],
},
methods: {
    addMessage(message) {
        this.messages.push(message);
        axios.post('/messages', message).then(response => {

        });
    },
    loadMessages(messages) {
        this.messages = messages;
    }
},
created() {
    axios.get('/conversations').then(response => {
        this.conversations = response.data;
    });

    axios.get('/messages').then(response => {
        this.messages = response.data;
    });

    Echo.join('chatroom')
        .listen('MessagePosted', (e) => {
            this.messages.push({
                message: e.message.message,
                user: e.user
            });

            console.log(e);
        });

}
});

推荐答案

为此，我建议使用

For this I'd recommend using Vuex or another way of maintaining state. The idea is, you receive data from the api, place it in a vuex store that is available between components, and leverage reactivity to notify the intended recipient that data is available.

与此插件之类的插件一起使用时，您的数据可以在浏览器会话之间持久存在

When used with a plugin such as this one, your data can persist between browser sessions.

一般工作流程如下:

axios.get('/messages/' + conversation_id, conversation_id).then(response => {
     // HOW TO SEND THEM BACK???
     this.$store.commit('setMessages', response.data)
});

然后在app.js中，您将使用vuex的辅助函数:

Then in app.js you would use vuex's helper functions:

computed: {
     ...mapGetters({
          messages: 'getMessages'
     })
}

现在计算出的消息将是反应性的，这意味着您可以在模板或其他计算出的消息中使用它，并且消息将相应地更新:

The messages computed will now be reactive, meaning that you can use it in your template or other computeds and they will update accordingly:

<template>
    <ul>
        <li v-for="(message, index) in messages" :key="index">
             {{ message.content }}
        </li>
    </ul>
</template>

这篇关于vue.js将数据传递回组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！