Vue 3 で指定された要素の変数へのスクロールを実装するにはどうすればよいですか?
<p>純粋な JavaScript には要素までスクロールする次の関数があり、このコードを Vue 3 に変換したいと考えています。 </p>
<pre class="brush:php;toolbar:false;">var source = ''
関数 showScrollInto(currentLocation, toLocation) {
source = currentLocation // セクションを非表示にした後に返される場所
document.getElementById(toLocation).style.display = 'ブロック'
document.getElementById(toLocation).scrollIntoView()
}</pre>
<p>そして元の場所に戻ります: </p>
<pre class="brush:php;toolbar:false;">document.getElementById(source).scrollIntoView()</pre>
<p>ボタンがクリックされたときに showScrollInto を呼び出します: </p>
<pre class="brush:php;toolbar:false;"><button onClick="showScrollInto('top', 'interesse')">TITLE</button></pre>
<p>次に、関数をメソッドに変換して試してみます。 </p>
<pre class="brush:php;toolbar:false;">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()
}
}
}</pre>
<p>ボタンをクリックして showScrollInto を呼び出します: </p>
<pre class="brush:php;toolbar:false;"><button @click="showScrollInto($event, 'kosten', 'interesse')">TITLE</button></前>
<p>スクロールする要素は次のとおりです: </p>
<pre class="brush:php;toolbar:false;"><section class = "top-level-section" v-show="!hideInteresse" ref="interesse"></前>
<p>変数をメソッドに渡すことは正常に機能しますが、位置が変数である位置までスクロールする方法がわかりません。 </p>
<p>this.$refs.interesse.scrollIntoView({ Behavior: 'smooth'}) を使用すると、ID が 'interesse' の要素にスクロールできますが、その要素名を変数に変換する方法がわかりません。
さらに、this.$refs は Vue 3 の表記法ではないため、ref('value') のようなものに変換する必要があることは理解していますが、その方法がわかりません。</p>
