javascript - 找到合适的时机访问从异步调用的数据创建的 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 准备好并且 ID 为 '5' 的元素存在时如何执行？

标签： javascriptvue.jsasync-await

Answer 1

从响应中更新后this.items，您需要让 Vue 有机会识别更改并相应地更新 DOM

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

或使用回调的等价物