<p>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. </p> <pre class="brush:php;toolbar:false;">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()</pre> <p>Appelez showScrollInto lorsque vous cliquez sur le bouton : </p> <pre class="brush:php;toolbar:false;"><button onClick="showScrollInto('top', 'interesse')">TITRE</button></pre> <p>Maintenant, je convertis la fonction en méthode et j'essaie : </p> <pre class="brush:php;toolbar:false;">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() } } }</pré> <p>Appelez showScrollInto en cliquant sur le bouton : </p> <pre class="brush:php;toolbar:false;"><button @click="showScrollInto($event, 'kosten', 'interesse')">TITLE</button></ pré> <p>Les éléments vers lesquels faire défiler sont les suivants : </p> <pre class="brush:php;toolbar:false;"><section class = "top-level-section" v-show="!hideInteresse" ref="interesse"></ pré> <p>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. </p> <p>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.</p>

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

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

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