Question

我正在构建一个使用feathers.js作为后端和Vue作为前端的聊天应用程序。到目前为止，一切似乎运转良好。它连接到猫鼬数据库，并且我在聊天应用程序中发送的消息存储在数据库中。我的问题是我想实时填充所有消息，但只有在刷新浏览器时才这样做。

我将用于填充消息的功能置于“已挂载”状态，但没有用

    <template>
    <v-container fluid>
        <v-slide-y-transition mode="out-in">
        <v-card class="pl-3 pr-3 pt-3 mt-3 ml-3 mr-3">
            <v-text-field v-model="text"></v-text-field>
            <v-btn class="primary" @click="saveText">Save</v-btn>
            <v-list>
            <v-list-tile v-for="msg in messages.data" :key="msg.id">
                <v-list-tile-content>
                <v-list-tile-title>{{msg.text}}</v-list-tile-title>
                <v-list-tile-sub-title>Created at: {{new Date (msg.createdAt).toString ()}}</v-list-tile-sub-title>
                </v-list-tile-content>
            </v-list-tile>
            </v-list>
        </v-card>
        </v-slide-y-transition>
    </v-container>
    </template>

    <script>
    import feathers from "../feathers-client";

    const messageService = feathers.service("messages");

    export default {
    name: "chat",
    data() {
        return {
        text: "",
        messages: []
        };
    },

    async mounted() {
        this.messages = await messageService.find();
        messageService.on("created", message => this.messages.data.push(message));
    },

    methods: {
        saveText() {
        messageService
            .create({ text: this.text })
            .then(res => {
            console.log("Message created correctly");
            })
            .catch(err => {
            console.error(err.message);
            });
        }
    }
    };
    </script>

我希望邮件会自动填充

Answer 1

this.messages = await messageService.find();
await this.$nextTick()
messageService.on("created", message => this.messages.data.push(message));

我猜想this.messages还没有更新，需要使用nextTick。 https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue

Vue-Feathers.js实时聊天应用程序填充消息

1 个答案: