VueJS - 模板变量不与数据变量反应

Question

我正在使用 socket.io 和 VueJS 制作一个聊天系统，以便客户可以与管理员交谈。但是当客户端连接到服务器时，data() 中的变量会更新。但是模板没有更新。

这是我的代码：

<template>
<div>
    <div class="chats" id="chat">
        <div class="chat" v-for="chat in chats">
            <b>{{ chat.clientName }}</b>
            <p>ID: {{ chat.clientID }}</p>
            <div class="jens-button">
                <img src="/icons/chat-bubble.svg">
            </div>

        </div>
    </div>
</div>
</template>

<script>


    let io = require('socket.io-client/dist/socket.io.js');

    let socket = io('http://127.0.0.1:3000');

    export default {
        name: 'Chats',
        data() {
            return {
                chats: [],
            }
        },
        mounted() {
            this.getClients();
            this.updateClients();
        },
        methods: {
            getClients() {
                socket.emit('get clients', true);
            },
            updateClients() {
                socket.on('update clients', (clients) => {

                    this.chats = clients;

                    console.log(this.chats);
                });
            }
        },

    }
</script>

然后我得到这个，盒子是空的：

但我需要得到这个，这只会在我强制重新加载页面时出现。我不知道我做错了什么......

Answer 1

好的，我发现问题出在哪里，在另一个组件中，我使用了普通的 javascript，它破坏了整个反应性的东西。