使用Vue 3脚本设置scrollIntoView

l0oc07j2 于 2023-03-24 发布在 Vue.js

关注(0)|答案(2)|浏览(471)

我试图滚动到一个特定的元素onclick。但我得到了以下错误。

Uncaught TypeError: element.scrollIntoView is not a function

这是我的剧本

<script setup>
import { ref } from 'vue'

function goTo(refName){
    let element = ref(refName);
   element.scrollIntoView({behavior: "smooth"})
}

</script>

这是我的点击功能

<DayWithText v-for="day in daysOfWeek" :name="day.shortHand" :day="day.day" :date="day.date"  @click.prevent="goTo('test')"/>

这就是元素

<p ref="test">test</p>

我哪里做错了？

vue.js

来源：https://stackoverflow.com/questions/72920333/scrollintoview-using-vue-3-script-setup

2条答案

按热度按时间

wtzytmuj1#

ref('test')不返回<p ref="test">test</p>。它创建一个新的ref，初始值为'test'（字符串）。
要得到那一段，你必须声明它为

const test = ref(null)

<script setup>内部（mount之前）。
在组件安装后的任何时间

test.value?.scrollIntoView({behavior: "smooth"})

会起作用。
演示：
一个一个二个一个一个一个三个一个一个一个一个一个四个一个
在mount上，当<template>解析器找到一个ref时，它会在setup作用域中查找具有该名称的声明变量。如果找到了，并且它是一个ref，则当前DOM元素被放置在该ref的value中。

赞(0）回复(0）举报 2023-03-24

czq61nw12#

就我而言

const refName = ref(null);

const goTo = () => {
    refName.value.$el.scrollIntoView({behavior: "smooth"});
}

超文本标记语言

<div @click="goTo()">scroll to</div>
<p id="refName">Scrolled position</p>

为我工作

赞(0）回复(0）举报 2023-03-24

我来回答

使用Vue 3脚本设置scrollIntoView

2条答案

相关问题

热门标签

最新问答