<p>我在纯JavaScript中有以下函数来滚动到一个元素，我想将这段代码转换为Vue 3。</p>
<pre class="brush:php;toolbar:false;">var source = ''
function showScrollInto(currentLocation, toLocation) {
source = currentLocation // 在隐藏部分后返回的位置
document.getElementById(toLocation).style.display = 'block'
document.getElementById(toLocation).scrollIntoView()
}</pre>
<p>并返回到原始位置：</p>
<pre class="brush:php;toolbar:false;">document.getElementById(source).scrollIntoView()</pre>
<p>在点击按钮时调用showScrollInto：</p>
<pre class="brush:php;toolbar:false;"><button onClick="showScrollInto('top', 'interesse')">TITLE</button></pre>
<p>现在我将该函数转换为一个方法并尝试：</p>
<pre class="brush:php;toolbar:false;">import { ref } from "vue"
var source = ""
const toLocation = ref('Vue.js')
export default {
name: "App",
data() {
return {
hideAlleClubs: true,
hideIkWilKennismaken: true,
hideAlleLocaties: true,
hideMeerOverKegelen: true,
hideInteresse: true
}
},
methods: {
showScrollInto(event, currentLocation, toLocation) {
source = currentLocation // 在隐藏部分后返回的位置
this.hideInteresse = false
this.$refs.toLocation.scrollIntoView({ behavior: 'smooth'})
// document.getElementById(toLocation).style.display = 'block'
// document.getElementById(toLocation).scrollIntoView()
}
}
}</pre>
<p>通过点击按钮调用showScrollInto：</p>
<pre class="brush:php;toolbar:false;"><button @click="showScrollInto($event, 'kosten', 'interesse')">TITLE</button></pre>
<p>要滚动到的元素如下：</p>
<pre class="brush:php;toolbar:false;"><section class = "top-level-section" v-show="!hideInteresse" ref="interesse"></pre>
<p>传递变量到方法中是可以的，但我无法弄清楚如何滚动到一个位置，其中位置是一个变量。</p>
<p>this.$refs.interesse.scrollIntoView({ behavior: 'smooth'}) 可以用于滚动到id为'interesse'的元素，但我不知道如何将该元素名称转换为一个变量。
此外，我了解到this.$refs不是Vue 3的表示法，应该转换为类似ref('value')的形式，但我不知道如何做到这一点。</p>
1
967
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
首先，阅读Vue的文档关于模板引用的部分。页面左上角有一个切换按钮，可以在选项API和组合API语法之间切换。
使用变量引用引用取决于您使用的Vue版本和/或语法。
Vue 2 / 选项API
变量应该是与元素上的ref匹配的字符串
const refVar = "someRefName" this.$refs[refVar].scrollIntoView({ behavior: "smooth" });Vue 3 / 组合API
变量应该被赋值为
ref()（需要导入）。常量的名称应该与元素上的ref名称匹配const someElement = ref() // 赋值给模板中的某个元素 someElement.value.scrollIntoView({ behavior: "smooth" });选项API和组合API不应混合使用，所以只使用一种语法。
在这两种情况下，您可以有多个具有相同ref名称的元素，此时Vue将创建一个包含所有相同名称ref的数组，因此要访问特定的元素，您还需要使用索引。
以下是一些简化的示例。希望它们能解决您的剩余问题，并且您可以根据需要进行修改。
选项API codesandbox示例
组合API codesandbox示例