Найдите подходящий момент для доступа к элементам DOM, созданным из данных асинхронного вызова

Question

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

Я попробовал следующее решение:

HTML:

<div id="app">
  <v-app>
    <div id='scrollableDiv'>
      <p v-for='item in items' :id='item.id'>{{item.title}}</p>
    </div>
  </v-app>
</div>

JavaScript:

new Vue({
  el: '#app',
  async created () {
    response = await axios.get('https://jsonplaceholder.typicode.com/todos')
    this.items = response.data
    const selectedElement = document.getElementById('5')
    this.scrollTo(selectedElement)
  },
  data: () => ({
      items: [] 
    }),
  methods: {
    scrollTo (selectedElement) {
       const scrollableDiv = document.getElementById('scrollableDiv')
       scrollableDiv.scrollTop = selectedElement.offsetTop
    }
  }
})

Это не работает, потому что document.getElementById('5') вызывается до того, как DOM готов.

Как выполнить document.getElementById('5'), когда DOM готов и элемент с идентификатором '5' существует?

Answer 1

После обновления this.items из ответа вам нужно дать Vue шанс распознать изменения и соответствующим образом обновить DOM

this.items = response.data
await this.$nextTick()
const selectedElement = document.getElementById('5')

или эквивалент с использованием обратных вызовов