Comment implémenter le défilement vers une variable d'un élément spécifié dans Vue 3 ?

Question

J'ai la fonction suivante en JavaScript pur pour faire défiler jusqu'à un élément et je souhaite convertir ce code en Vue 3.

var source = ''
fonction showScrollInto (currentLocation, toLocation) {
  source = currentLocation // L'emplacement à retourner après avoir masqué la section
  document.getElementById(toLocation).style.display = 'block'
  document.getElementById(toLocation).scrollIntoView()
}</pré>
<p>et revenez à l'emplacement d'origine : </p>
<pre class="brush:php;toolbar:false;">document.getElementById(source).scrollIntoView()

Appelez showScrollInto lorsque vous cliquez sur le bouton :

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

Maintenant, je convertis la fonction en méthode et j'essaie :

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

exporter par défaut {
    nom : "Application",
    données() {
        retour {
            hideAlleClubs : vrai,
            hideIkWilKennismaken : vrai,
            hideAlleLocaties : vrai,
            hideMeerOverKegelen : vrai,
            cacherInteresse: vrai
        }
    },
    méthodes : {
        showScrollInto (événement, emplacement actuel, emplacement) {
            source = currentLocation // L'emplacement à retourner après avoir masqué la section
            this.hideInteresse = faux
            this.$refs.toLocation.scrollIntoView({ behavior : 'smooth'})
            // document.getElementById(toLocation).style.display = 'block'
            // document.getElementById(toLocation).scrollIntoView()
        }
    }
}
Appelez showScrollInto en cliquant sur le bouton : 
TITLE
Les éléments vers lesquels faire défiler sont les suivants : 

Passer une variable dans la méthode fonctionne bien, mais je n'arrive pas à comprendre comment faire défiler jusqu'à une position où la position est une variable. 
this.$refs.interesse.scrollIntoView({ behavior: 'smooth'}) peut être utilisé pour faire défiler jusqu'à l'élément avec l'identifiant 'interesse', mais je ne sais pas comment convertir le nom de cet élément en variable .
De plus, je comprends que this.$refs n'est pas une notation Vue 3 et devrait être converti en quelque chose comme ref('value'), mais je ne sais pas comment faire cela.
            

Answer 1

Tout d’abord, lisez la documentationde Vue sur les références de modèles. Il y a un bouton bascule dans le coin supérieur gauche de la page pour basculer entre les options API et la syntaxe API combinée.

L'utilisation de références variables pour les références dépend de la version de Vue et/ou de la syntaxe que vous utilisez.

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

Vue 2 / API Options

La variable doit être une chaîne correspondant à la référence de l'élément

const refVar = "someRefName"
this.$refs[refVar].scrollIntoView({ behavior: "smooth" });

Vue 3 / API combinée

Les variables doivent se voir attribuer la valeur ref() (doit être importée). Le nom de la constante doit correspondre au nom de la référence sur l'élément

const someElement = ref() // 赋值给模板中的某个元素
someElement.value.scrollIntoView({ behavior: "smooth" });

L'API d'options et l'API de composition ne doivent pas être mélangées, c'est pourquoi une seule syntaxe est utilisée.

Dans les deux cas, vous pouvez avoir plusieurs éléments avec le même nom de référence, auquel cas Vue créera un tableau contenant toutes les références portant le même nom, donc pour accéder à un élément spécifique, vous devrez également utiliser un index.

Voici quelques exemples simplifiés. J'espère qu'ils résoudront vos problèmes restants et que vous pourrez les modifier si nécessaire.

Codes API d'options et exemple de boîte

Codes API combinés et exemple de boîte