Vue 3中如何實現滾動到指定元素的變數？

Question

我在純JavaScript中有以下函數可以捲動到一個元素，我想將這段程式碼轉換為Vue 3。

var source = ''
function showScrollInto(currentLocation, toLocation) {
  source = currentLocation // 在隱藏部分後傳回的位置
  document.getElementById(toLocation).style.display = 'block'
  document.getElementById(toLocation).scrollIntoView()
}

並回到原始位置：

document.getElementById(source).scrollIntoView()

點擊按鈕時呼叫showScrollInto：

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

現在我將該函數轉換為一個方法並嘗試：

import { ref } 從 "vue"
var source = ""
const toLocation = ref('Vue.js')

export default {
    name: "App",
    data() {
        return {
            hideAlleClubs: true,
            hideIkWilKennismaken: true,
            hideAlleLocaties: true,
            hideMeerOverKegelen: true,
            hideInteresse: true
        }
    },
    methods: {
        showScrollInto(event, currentLocation, toLocation) {
            source = currentLocation // 在隱藏部分後傳回的位置
            this.hideInteresse = false
            this.$refs.toLocation.scrollIntoView({ behavior: 'smooth'})
            // document.getElementById(toLocation).style.display = 'block'
            // document.getElementById(toLocation).scrollIntoView()
        }
    }
}

透過點擊按鈕呼叫showScrollInto：

TITLE
要捲動到的元素如下：
<>< pre>
傳遞變數到方法中是可以的，但我無法弄清楚如何滾動到一個位置，其中位置是一個變數。 
this.$refs.interesse.scrollIntoView({ behavior: 'smooth'}) 可以用來捲動到id為'interesse'的元素，但我不知道如何將該元素名稱轉換為變數。
此外，我了解到this.$refs不是Vue 3的表示法，應該轉換為類似ref('value')的形式，但我不知道如何做到這一點。

Answer 1

首先，閱讀Vue的文件關於範本引用的部分。頁面左上角有一個切換按鈕，可以在選項API和組合API語法之間切換。

使用變數引用引用取決於您使用的Vue版本和/或語法。

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

Vue 2 / 選項API

變數應該是與元素上的ref相符的字串

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

Vue 3 / 組合API

變數應該被賦值為ref()（需要導入）。 常數的名稱應該與元素上的ref名稱相符

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

選項API和組合API不應混合使用，所以只使用一種語法。

在這兩種情況下，您可以有多個具有相同ref名稱的元素，此時Vue將建立一個包含所有相同名稱ref的數組，因此要存取特定的元素，您還需要使用索引。

以下是一些簡化的範例。希望它們能解決您的剩餘問題，並且您可以根據需要進行修改。

選項API codesandbox範例

組合API codesandbox範例