Смотреть данные Firebase: выполнить действие после обновления DOM

Question

Я разрабатываю приложение для чата в реальном времени с Vue. js и базой данных Firebase в реальном времени.

Когда новое сообщение получено, я хочу, чтобы окно чата прокрутилось до конца. Чтобы добиться этого, я создал наблюдателя для данных разговора. Однако функция в наблюдателе выполняется до обновления DOM, поэтому значение прокрутки еще не верное. Должен ли я смотреть другую собственность? Как я могу определить, когда новые данные были загружены в DOM?

HTML Код

<div class="chat" ref="chat">
    <div 
      v-for="(message,key) in conversations" :key="key">
      <div class="message">
        {{message.text}}
      </div>
    </div>
</div>

Скрипт (я использую VueFire)

const conversations = db.ref('conversations');

export default {
  data() {
    return {
      conversations: {},
    }
  },
  watch: {
    conversations: function() {
      //Scroll to bottom when new message received
      this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight;
    }
  }
}

Я могу решить эту проблему, установив таймаут, но это грязная хитрость, имо ...

setTimeout(() => {
  this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight;
}, 300);

Спасибо за вашу помощь.

Answer 1

Редактировать: DOMNodeInserted => MutationObserver

Вы можете использовать MutationObserver

Вот рабочий пример: https://codepen.io/Qumez/pen/WNvOWwp

Создайте метод scrollToBottom:

...
methods: {
        scrollToBottom() {
            this.$refs.wrapper.scrollTop = this.$refs.wrapper.scrollHeight;
        }
    }
...

И вызывайте его всякий раз, когда добавляется новое сообщение:

...
data() {
  return {
    mo: {}  
  }
},
mounted() {
        let vm = this;
        this.mo = new MutationObserver((mutationList, observer) => {
            vm.scrollToBottom();
        });
        this.mo.observe(this.$el, {childList: true})
    }
...

Мои имена переменных немного отличаются от ваших, но это Я буду работать с вашим кодом, как только вы обновите его.