Bagaimana untuk melaksanakan tatal ke pembolehubah elemen tertentu dalam Vue 3?

Question

Saya mempunyai fungsi berikut dalam JavaScript tulen untuk menatal ke elemen dan saya mahu menukar kod ini kepada Vue 3.

var source = ''
function showScrollInto(currentLocation, toLocation) {
  source = currentLocation // Lokasi untuk kembali selepas menyembunyikan bahagian
  document.getElementById(toLocation).style.display = 'block'
  document.getElementById(toLocation).scrollIntoView()
}

dan kembali ke lokasi asal:

document.getElementById(source).scrollIntoView()

Panggil showScrollKe dalam apabila butang diklik:

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

Sekarang saya menukar fungsi kepada kaedah dan cuba:

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()
        }
    }
}

Panggil showScrollInto pada klik butang:

TITLE
Elemen untuk menatal adalah seperti berikut: 

Melalukan pembolehubah ke dalam kaedah berfungsi dengan baik, tetapi saya tidak dapat memikirkan cara untuk menatal ke kedudukan yang kedudukannya ialah pembolehubah. 
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.

Answer 1

Pertama, baca dokumentasi Vue tentang rujukan templat. Terdapat butang togol di penjuru kiri sebelah atas halaman untuk bertukar antara pilihan API dan sintaks API gabungan.

Menggunakan rujukan pembolehubah untuk rujukan bergantung pada versi Vue dan/atau sintaks yang anda gunakan.

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

Vue 2 / API Pilihan

Pembolehubah mestilah rentetan yang sepadan dengan ref pada elemen

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

Vue 3 / API Gabungan

Pembolehubah hendaklah diberi nilai ref() (perlu diimport). Nama pemalar hendaklah sepadan dengan nama ref pada elemen

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

API Pilihan dan API komposisi tidak boleh dicampur, jadi hanya satu sintaks digunakan.

Dalam kedua-dua kes anda boleh mempunyai berbilang elemen dengan nama rujukan yang sama, pada ketika itu Vue akan mencipta tatasusunan yang mengandungi semua rujukan dengan nama yang sama, jadi untuk mengakses elemen tertentu anda juga perlu menggunakan indeks.

Berikut adalah beberapa contoh ringkas. Semoga mereka menyelesaikan masalah anda yang tinggal dan anda boleh mengubah suainya mengikut keperluan.

Contoh kotak pasir kod API pilihan

Contoh kotak pasir kod API gabungan