时间戳

首页 > 解决方案 > VueJS 数据返回数组不与模板反应

javascript - VueJS 数据返回数组不与模板反应

问题描述

我正在使用 VueJS 和 socket.io 为管理员和客户制作一个聊天系统。当客户端连接到服务器并输入名称时，它应该在管理员聊天中添加一个带有客户端名称的新行。当他们断开连接时，它应该从管理员聊天列表中删除。但这不起作用。我必须强制重新加载页面，然后聊天就消失了。

模板：

    <div class="chats" id="chat"  v-if="chats.length >= 1">
        <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 class="chats" v-else>
        <div class="chat">
            <b>There are no chats avaiable.</b>
        </div>
    </div>

数据：

        data() {
            return {
                chats: [],
            }
        },


        method() {                                           
            socket.on('update clients', (clients) => {
                console.log(clients);
                this.chats = [];
                if(clients.length >= 1) {
                    this.chats = clients;
                } else {
                    this.chats = [];
                }
            });
        }

出了什么问题？如果有人找到答案，您能否也给我一个解释为什么它不起作用？谢谢！

标签： javascriptvue.jssocket.io

解决方案

你现在得到它的方式不是在 Vue中声明方法的有效方式。这样你socket.on就永远不会被宣布。请利用mounted(). 您可以在此处阅读有关组件生命周期的更多信息。

一个准系统示例如下。还要确保在:key您的v-for.

<div class="chats" id="chat"  v-if="chats.length >= 1">
        <div class="chat" v-for="chat in chats" :key="chat.clientID">

data() {
  return {
    chats: [],
  }
},
mounted() {
  socket.on('update clients', (clients) => {
    // You could also declare a dedicated method for this instead of doing it inline
    console.log(clients);
    if(clients.length >= 1) {
      this.chats = clients;
    } else {
      this.chats = [];
    }
  });
}

推荐阅读