<p>Saya mempunyai fungsi berikut dalam JavaScript tulen untuk menatal ke elemen dan saya mahu menukar kod ini kepada Vue 3. </p> <pre class="brush:php;toolbar:false;">var source = '' function showScrollInto(currentLocation, toLocation) { source = currentLocation // Lokasi untuk kembali selepas menyembunyikan bahagian document.getElementById(toLocation).style.display = 'block' document.getElementById(toLocation).scrollIntoView() }</pre> <p>dan kembali ke lokasi asal: </p> <pre class="brush:php;toolbar:false;">document.getElementById(source).scrollIntoView()</pre> <p>Panggil showScrollKe dalam apabila butang diklik: </p> <pre class="brush:php;toolbar:false;"><button onClick="showScrollInto('top', 'interesse')">TITLE</button></pre> <p>Sekarang saya menukar fungsi kepada kaedah dan cuba: </p> <pre class="brush:php;toolbar:false;">import { ref } daripada "vue" var sumber = "" const toLocation = ref('Vue.js') eksport lalai { nama: "App", data() { kembali { hideAlleClubs: benar, hideIkWilKennismaken: benar, hideAlleLocaties: benar, hideMeerOverKegelen: benar, hideInteresse: benar } }, kaedah: { showScrollInto(event, currentLocation, toLocation) { source = currentLocation // Lokasi untuk kembali selepas menyembunyikan bahagian this.hideInteresse = palsu this.$refs.toLocation.scrollIntoView({ tingkah laku: 'smooth'}) // document.getElementById(toLocation).style.display = 'block' // document.getElementById(toLocation).scrollIntoView() } } }</pre> <p>Panggil showScrollInto pada klik butang: </p> <pre class="brush:php;toolbar:false;"><button @click="showScrollInto($event, 'kosten', 'interesse')">TITLE</button></ pra> <p>Elemen untuk menatal adalah seperti berikut: </p> <pre class="brush:php;toolbar:false;"><kelas bahagian = "v-show="!hideInteresse" pra> <p>Melalukan pembolehubah ke dalam kaedah berfungsi dengan baik, tetapi saya tidak dapat memikirkan cara untuk menatal ke kedudukan yang kedudukannya ialah pembolehubah. </p> <p>ini.$refs.interesse.scrollIntoView({ behavior: 'smooth'}) boleh digunakan untuk menatal ke elemen dengan id 'interesse', tetapi saya tidak tahu cara menukar nama elemen itu kepada pembolehubah . Selain itu, saya faham bahawa ini.$refs bukan tatatanda Vue 3 dan harus ditukar kepada sesuatu seperti ref('value'), tetapi saya tidak tahu cara melakukannya.</p>

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

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

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