VueJS массив возврата данных не реагирует с шаблоном

Question

Я делаю систему чата для администратора и клиентов, используя 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 = [];
                }
            });
        }

Что пошло не так? Если кто-то найдет ответ, не могли бы вы также объяснить, почему он не работает? Спасибо!

Answer 1

То, как вы его получили прямо сейчас, не является допустимым способом объявления методов в 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 = [];
    }
  });
}