this.$refs.item1.scrollIntoView is not a function，this.$refs[index].scrollIntoView is not a function

shangfengxia

已于 2022-03-30 19:12:52 修改

阅读量5.9k

点赞数 10

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： javascript vue.js 开发语言

于 2022-03-02 18:18:24 首次发布

本文链接：https://blog.csdn.net/BellaShang/article/details/123236465

Vue 专栏收录该内容

4 篇文章

订阅专栏

在Vue开发中遇到使用ref进行屏幕滚动时的错误，问题在于v-for循环中ref获取到的是一个数组。解决方案是通过索引访问数组元素，如`this.$refs['item' + _index][0].scrollIntoView()`。此外，还可以统一ref名称并通过index参数操作对应DOM。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天使用Vue过程中，使用ref去操作dom想要实现屏幕滚动效果时报错,his.$refs[index].scrollIntoView is not a function和this.$refs.item1.scrollIntoView is not a function；

报错截图和代码如下：

<div v-for="(item,index) in [{name:'test1'},{name:'test2'}]" @click="clickItem(index)">
  <div :ref="'item'+index" style="height: 500px;background-color: white;margin-top: 10px">
    {{ item.name }}
  </div>
</div>

clickItem: function (_index) {
  this.$refs[`item${_index}`].scrollIntoView(
      {
        behavior: "smooth",  // 平滑过渡
        block: "start"  // 上边框与视窗顶部平齐。默认值
      }
  );
},

一开始以为是我方法中模板字符串用的有问题，于是尝试指定特定ref：改为this.$refs.item1和this.$refs['item1']，

clickItem: function (_index) {
  this.$refs.item1.scrollIntoView(
      {
        behavior: "smooth",  // 平滑过渡
        block: "start"  // 上边框与视窗顶部平齐。默认值
      }
  );
},

结果还是报错

然后通过调试发现获取的ref是一个数组

然后划重点！！通过搜索了一番，发现ref加在普通元素上，this.$refs.name获取的是dom元素，用在v-for时，获取的是包含一组dom的数组。

最直接的解决办法是将下标设为0，通过this.refs.[`item${_index}`][0]获取指定的dom结构；

clickItem: function (_index) {
  this.$refs[`item${_index}`][0].scrollIntoView(
      {
        behavior: "smooth",  // 平滑过渡
        block: "start"  // 上边框与视窗顶部平齐。默认值
      }
  );
},

成功解决！！！

上述方法是将dom元素上的ref指向了变量item0、item1等，同理由数组可知ref不同于id，不是唯一标识的，可以在v-for中将ref命名为统一名称，通过v-for中的index索引传递给js函数的参数中进行相应dom的操作，如下图为另一种写法：

<div ref="item" v-for="(item,index) in [{name:'test1'},{name:'test2'}]" @click="clickItem(index)">
  <div style="height: 500px;background-color: white;margin-top: 10px">
    {{ item.name }}
  </div>
</div>

clickItem:function (_index){
  this.$refs.item[_index].scrollIntoView(
      {
        behavior: "smooth",  // 平滑过渡
        block: "start"  // 上边框与视窗顶部平齐。默认值
      }
  );