Vue 3 で指定された要素の変数へのスクロールを実装するにはどうすればよいですか?

Question

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

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

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

document.getElementById(source).scrollIntoView()

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

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

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

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') のようなものに変換する必要があることは理解していますが、その方法がわかりません。
            

Answer 1

まず、テンプレート参照についての Vue の ドキュメント を読んでください。ページの左上隅にトグル ボタンがあり、オプション API と複合 API 構文を切り替えることができます。

変数参照の使用は、使用している Vue のバージョンや構文によって異なります。

リーリー

Vue 2 / オプション API

変数は要素の参照と一致する文字列である必要があります

リーリー

Vue 3 / 組み合わせ API

変数には値 ref() を割り当てる必要があります (インポートが必要です)。 定数の名前 は要素の参照名と一致する必要があります

リーリー

オプション API と合成 API を混合しないでください。そのため、使用する構文は 1 つだけです。

どちらの場合も、同じ ref 名を持つ複数の要素を持つことができます。その時点で、Vue は同じ名前を持つすべての ref を含む配列を作成するため、特定の要素にアクセスするにはインデックスも使用する必要があります。

次に、いくつかの簡略化した例を示します。これらが残りの問題を解決し、必要に応じて修正できることを願っています。

オプション API コードサンドボックスの例

結合された API コードサンドボックスの例