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

Posted 2023-02-23

【中文标题】挂载钩子中的错误（承诺/异步）：“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？

【参考方案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 循环