How to implement scrolling to a variable of a specified element in Vue 3?

Question

I have the following function in pure JavaScript to scroll to an element and I want to convert this code to Vue 3.

var source = ''
function showScrollInto(currentLocation, toLocation) {
  source = currentLocation // The location to return after hiding the section
  document.getElementById(toLocation).style.display = 'block'
  document.getElementById(toLocation).scrollIntoView()
}

and return to the original location:

document.getElementById(source).scrollIntoView()

Call showScrollInto when the button is clicked:

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

Now I convert the function into a method and try:

import { ref } from "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 // The location to return after hiding the section
            this.hideInteresse = false
            this.$refs.toLocation.scrollIntoView({ behavior: 'smooth'})
            // document.getElementById(toLocation).style.display = 'block'
            // document.getElementById(toLocation).scrollIntoView()
        }
    }
}

Call showScrollInto by clicking the button:

TITLE
The elements to scroll to are as follows: 

Passing a variable into the method works fine, but I can't figure out how to scroll to a position where the position is a variable. 
this.$refs.interesse.scrollIntoView({ behavior: 'smooth'}) can be used to scroll to the element with id 'interesse', but I don't know how to convert that element name into a variable.
Additionally, I understand that this.$refs is not a Vue 3 notation and should be converted to something like ref('value'), but I don't know how to do that.
            

Answer 1

First, read Vue’s documentation about template references. There is a toggle button in the upper left corner of the page to switch between options API and combined API syntax.

Using variable references depends on the Vue version and/or syntax you are using.

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

Vue 2 / Options API

The variable should be a string matching the ref on the element

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

Vue 3 / Combination API

Variables should be assigned the value ref() (requires import). The name of the constant should match the ref name on the element

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

Options API and composition API should not be mixed, so only one syntax is used.

In both cases you can have multiple elements with the same ref name, at which point Vue will create an array containing all the refs with the same name, so to access a specific element you will also need to use an index.

The following are some simplified examples. Hopefully they solve your remaining problems and you can modify them as needed.

Options API codesandbox example

Combined API codesandbox example