Wie implementiert man das Scrollen zu einer Variablen eines bestimmten Elements in Vue 3?

Question

Ich habe die folgende Funktion in reinem JavaScript, um zu einem Element zu scrollen, und ich möchte diesen Code in Vue 3 konvertieren.

var source = ''
Funktion showScrollInto(currentLocation, toLocation) {
  source = currentLocation // Der Speicherort, der nach dem Ausblenden des Abschnitts zurückgegeben werden soll
  document.getElementById(toLocation).style.display = 'block'
  document.getElementById(toLocation).scrollIntoView()
}

und zum ursprünglichen Speicherort zurückkehren:

document.getElementById(source).scrollIntoView()

showScrollInto aufrufen, wenn auf die Schaltfläche geklickt wird:

<button onClick="showScrollInto('top', 'interesse')">TITLE</button>

Jetzt wandle ich die Funktion in eine Methode um und versuche:

import { ref } from "vue"
var source = ""
const toLocation = ref('Vue.js')

Standard exportieren {
    Name: "App",
    Daten() {
        zurückkehren {
            hideAlleClubs: wahr,
            hideIkWilKennismaken: stimmt,
            hideAlleLocaties: wahr,
            hideMeerOverKegelen: wahr,
            hideInteresse: wahr
        }
    },
    Methoden: {
        showScrollInto(event, currentLocation, toLocation) {
            source = currentLocation // Der Speicherort, der nach dem Ausblenden des Abschnitts zurückgegeben werden soll
            this.hideInteresse = false
            this.$refs.toLocation.scrollIntoView({ behavior: 'smooth'})
            // document.getElementById(toLocation).style.display = 'block'
            // document.getElementById(toLocation).scrollIntoView()
        }
    }
}

showScrollInto beim Klicken auf die Schaltfläche aufrufen:

TITLE
Die Elemente, zu denen Sie scrollen können, sind wie folgt: 

Die Übergabe einer Variablen an die Methode funktioniert einwandfrei, aber ich kann nicht herausfinden, wie ich zu einer Position scrollen kann, an der die Position eine Variable ist. 
this.$refs.interesse.scrollIntoView({ behavior: 'smooth'}) kann verwendet werden, um zum Element mit der ID 'interesse' zu scrollen, aber ich weiß nicht, wie ich diesen Elementnamen in eine Variable umwandeln soll .
Außerdem verstehe ich, dass this.$refs keine Vue-3-Notation ist und in etwas wie ref('value') konvertiert werden sollte, aber ich weiß nicht, wie das geht.

Answer 1

首先，阅读Vue的文档关于模板引用的部分。页面左上角有一个切换按钮，可以在选项API和组合API语法之间切换。

使用变量引用引用取决于您使用的Vue版本和/或语法。

<div ref="someRefName"></div>

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示例