純粋な JavaScript には要素までスクロールする次の関数があり、このコードを Vue 3 に変換したいと考えています。

var source = '' 関数 showScrollInto(currentLocation, toLocation) { source = currentLocation // セクションを非表示にした後に返される場所 document.getElementById(toLocation).style.display = 'ブロック' document.getElementById(toLocation).scrollIntoView() }

そして元の場所に戻ります:

document.getElementById(source).scrollIntoView()

ボタンがクリックされたときに showScrollInto を呼び出します:

TITLE

次に、関数をメソッドに変換して試してみます。

import { ref } from "vue" var ソース = "" const toLocation = ref('Vue.js') デフォルトのエクスポート { 名前: 「アプリ」、 データ（） { 戻る { HideAlleClubs: true、 HideIkWilKennismaken: true、 HideAlleLocatures: true、 HideMeerOverKegelen: true、 HideInteresse: true } }、 メソッド: { showScrollInto(event, currentLocation, toLocation) { source = currentLocation // セクションを非表示にした後に返される場所 this.hideInteresse = false this.$refs.toLocation.scrollIntoView({ 動作: 'smooth'}) // document.getElementById(toLocation).style.display = 'ブロック' // document.getElementById(toLocation).scrollIntoView() } } }

ボタンをクリックして showScrollInto を呼び出します:

TITLE 
スクロールする要素は次のとおりです: 
 
 
変数をメソッドに渡すことは正常に機能しますが、位置が変数である位置までスクロールする方法がわかりません。 
 
this.$refs.interesse.scrollIntoView({ Behavior: 'smooth'}) を使用すると、ID が 'interesse' の要素にスクロールできますが、その要素名を変数に変換する方法がわかりません。 さらに、this.$refs は Vue 3 の表記法ではないため、ref('value') のようなものに変換する必要があることは理解していますが、その方法がわかりません。