挂载钩子中的错误（承诺/异步）：“TypeError：无法读取未定义的属性'scrollIntoView'”在挂载钩子（Vue）中答案

【问题标题】：Error in mounted hook (Promise/async): "TypeError: Cannot read property 'scrollIntoView' of undefined" in mounted hook (Vue)挂载钩子中的错误（承诺/异步）：“TypeError：无法读取未定义的属性'scrollIntoView'”在挂载钩子（Vue）中
【发布时间】：2021-03-28 23:22:10
【问题描述】：

ScrollIntoView 返回未定义

导航到该页面时，我试图滚动到元素中：

scrollTo(itemId) {
  this.$refs['item' + itemId].scrollIntoView({
    behavior: 'smooth',
    block: 'center',
    inline: 'nearest',
  })
},

关键是它在挂载的钩子内部被调用。 ref 已定义 itemId 也已定义，它是来自 vue 路由器的查询参数，但它仍然抛出 挂载钩子中的错误（Promise/async）：“TypeError: Cannot read property 'scrollIntoView' of undefined”

出了什么问题，如何解决？

【问题讨论】：

如何调用scrollTo 以及如何引用元素？
@BoussadjraBrahim 我在 div 中设置： :ref="'item' + item.itemId" 它在生成的循环内。当我调用 scrollTo 时，在挂载的钩子中我设置了参数 this.$route.query.itemId
@BoussadjraBrahim 看起来原因是这样的： this.$refs['item' + itemId] 返回 undefined 但是当我 console.log this.$refs 它返回对象 item889 存在。 889 也作为 itemId 传递给方法，为什么它会抛出 undefined？

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

动态引用似乎还没有在挂载的钩子中准备好，所以尝试观察$route 对象并滚动到所需的元素：

watch:{
$route:{
    handler(to,from){

         if(to.query.itemId){
           this.scrollTo(to.query.itemId)
         },
    deep:true //because $route is an object
   }
}

}

但我认为你应该使用scroll-behavior之类的东西

【讨论】：

似乎没有在手表内部调用
无论如何都不会被调用
尝试在if(...)之前记录to和from
我认为问题不在于实现方式，而在于如何访问特定的 ref。 this.$refs['item' + itemId] 好像错了
请分享 v-for 循环