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

今天使用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"  // 上边框与视窗顶部平齐。默认值
      }
  );