Прокрутите вниз в vue в конкретном элементе

Question

Я пытаюсь прокрутить вниз появившийся элемент vue:

У меня есть сообщения чата, в которых у меня есть два массива:

data() {
  return {
    activeChats: [],
    openedChats: [],
    maxOpened: math.round(window.innerWidth / 300), 
  }
}

Когда я получаю новое сообщение, и разговорне в активные и открытые массивы, которые я добавляю в оба, и они появляются на экране, потому что я использовал v-for в обоих массивах.

Это все работает, но я не уверен, как прокрутить вниз div при появлении нового чата,Я пытался использовать ссылки, но безуспешно:

<div class="chat" v-for="chat in openedChats" ref="chat-{chat.id}"></div> Или даже просто тестирование чата с одним открытым чатом ..

А внутри axios then() после успеха я сказал:

this.$refs.chat['-'+response.data.id].scrollTo(9999999,99999999);
or
this.$refs.chat['-'+response.data.id].scrollTop = 99999999;
or
this.$refs.chat.scrollTo(9999999,99999999);
or
this.$refs.chat.scrollTop = 99999999;

И ни один не работал ...

Любая помощь?: D

Можно ли это сделать без дополнительной библиотеки, мне не нужны анимации, чтобы просто появиться внизу элемента ...

Спасибо

Answer 1

См. Этот пример:

https://jsfiddle.net/eywraw8t/430100/

Используйте «watch» (https://vuejs.org/v2/guide/computed.html) для обнаружения изменений в массиве сообщений (из ajax или просто с помощью кнопки, как впример). Установите идентификатор (или вы можете использовать ref, если хотите) на основе индекса сообщения. Затем прокрутите до последнего элемента в вашем массиве (получите последний с помощью array.length).

new Vue({
  el: "#app",
  data: {
    messages: [
      { id: 1, text: 'message' },
    ],
  },
  watch:
  {
    messages: function() {
      let id = this.messages.length;
      //takes a bit for dom to actually update
      setTimeout(function() {
          document.getElementById('message-' + id).scrollIntoView();
      }, 100);
      
    },
  },
  methods: {
    addMessage: function(){
      let id = this.messages.length + 1;
      this.messages.push({ id: id, text: 'message'});
    }
  }
})

<div id="app">
  <button v-on:click="addMessage()" style="position:fixed">
  Add message
  </button>
  <div class="message" v-for="message in messages" :id="'message-' + message.id">
    {{message.text}} {{ message.id}}
  </div>
</div>