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:

TITLE

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.