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