Как vuejs реагирует на данные компонента, обновляемые асинхронно

Question

Я очень новичок в vuejs и недавно начал пытаться заменить какой-то старый код jquery, который у меня есть, и сделать его реактивным с vuejs.Дело в том, что у меня есть компонент, который асинхронно получает информацию с сервера nodejs через socket.io.

Когда я получаю данные и обновляю данные своего компонента, я вижу изменения, когда я консоль регистрирую их, но он не меняетсяDOM так, как я хочу.

Как правильно асинхронно захватывать данные и использовать их внутри компонента?Я публикую некоторые части своего кода, чтобы вы могли его увидеть.Я буду признателен за любые советы, которые вы можете дать мне.Заранее спасибо!

Vue.component('chat', {
      data() {
        return {
          chat: null,
          commands: [],
          chatOpened: false,
        }
      },

      props: [
        'io',
        'messages',
        'channels',
        'connectChat',
        'roomChat',
        'user',
        'userId',
        'soundRoute',
      ],

      methods: {
        openChat() {
          this.chatOpened = true;
        },

        closeChat() {
          this.chatOpened = false;
        },
      },

      created() {
        this.chat = this.$io.connect(this.connectChat);
        this.commands.push('clear');

        let self = this;

        $.each(this.channels, function(index, value) {
          self.chat.emit('join', {room: index, user: self.user, userId: self.userId}, function(err, cb) {
            if (!err) {
              users = cb.users;
              messages = cb.messages;

              if (messages.length > 0) {
                self.channels[index].loaded = true;
              }

              //some more code
            }
          });
        });

        console.log(this.channels);
      },

      template: `
          <div>
            <div id="container-chat-open-button" @click="openChat" :class="{hide : chatOpened}">
              <div>+90</div>
              <i class="fas fa-comment-alt"></i>
            </div>
            <div id="container-chat" class="chat__container" :class="{open : chatOpened}">
              <div id="container-chat-close-button" @click="closeChat">
                <span>
                  <div>
                    <i class="fas fa-comment-alt"></i>
                    @{{ messages.chat_lobby_icon_title }}
                  </div>
                  <i class="icon-arrowdown"></i>
                </span>
              </div>
              <div id="alert-chat" class="chat__container-notifications animated flash"></div>
              <div class="row">
                <ul>
                  <li v-for="channel in channels" v-show="channel.loaded === true">Channel loaded</li>
                </ul>
              </div>
            </div>
          </div>
        `
      });

Я бы ожидал увидеть список каналов с сообщениями, но вместо этого я не вижу список даже при мысли, что вижу мои каналы с загруженным атрибутом, установленным в значение true (по умолчанию онидля всех атрибутов установлено значение false).

Answer 1

Я предполагаю, что эта часть работает не так, как ожидалось.

if (messages.length > 0) {
   self.channels[index].loaded = true;
}

Реактивный способ сделать это - снова установить полный объект.

Vue.set(self.channels, index, {
   ...self.channels[index],
   loaded: true
}

РЕДАКТИРОВАТЬ1:

this.channels.forEach((channel) => {
    this.chat.emit('join', {room: index, user: self.user, userId: self.userId}, (err, cb) => {
        if (!err) {
            users = cb.users;
            messages = cb.messages;

            if (messages.length > 0) {
                Vue.set(self.channels, index, {
                    ...self.channels[index],
                    loaded: true
                }
            }

            //some more code
        }
    });
})

Вам потребуется добавить поддержку оператора rest-spread, используя babel.