How to scroll into variable element with Vue 3?

Question

I have following function in pure JavaScript to scroll into an element and I would like to convert that code to Vue 3.

var source = ''
function showScrollInto(currentLocation, toLocation) {
  source = currentLocation  // where to return to after section is hidden
  document.getElementById(toLocation).style.display = 'block'
  document.getElementById(toLocation).scrollIntoView()
}

and to return to the original location:

document.getElementById(source).scrollIntoView()

showScrollInto is called when clicking a button:

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

Now I turned that function into a method and tried

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  // where to return to after section is hidden
            this.hideInteresse = false
            this.$refs.toLocation.scrollIntoView({ behavior: 'smooth'})
            // document.getElementById(toLocation).style.display = 'block'
            // document.getElementById(toLocation).scrollIntoView()
        }
    }
}

where showScrollInto is called by clicking a button like this:

<button @click="showScrollInto($event, 'kosten', 'interesse')">TITLE</button> 

Elements to scroll into are like this:

<section class = "top-level-section" v-show="!hideInteresse" ref="interesse">

Passing the variables into the method works, but I can't figure out how to scroll to a location where the location is a variable.

this.$refs.interesse.scrollIntoView({ behavior: 'smooth'}) works for going to element with id 'interesse', but I don't know how to turn that element-name into a variable. Furthermore I understand that this$refs is not Vue 3 notation and should be turned into something like ref('value') but I don't know how to do that.

Answer 1

First, read through the Vue documentation on template refs. There is a toggle in the top-left of the page where you can switch between Options API and Composition API syntax.

Referencing refs with variables depends on your version of Vue and/or syntax.

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

Vue 2 / Options API

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

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

Vue 3 / Composition API

The variable should be assigned ref() (import required). The name of the const should match the name of the ref on the element

const someElement = ref() // assigned to some element in the template
someElement.value.scrollIntoView({ behavior: "smooth" });

Options API and Composition API should not be mixed, so only stick with one syntax.

In both cases you can have multiple elements with the same ref name, in which case Vue will create an array of all same name refs, so to access a specific one you would also use an index

Below are some simplified examples. Hopefully they will clear up any remaining questions and you can modify to fit your needs.

Options API codesandbox example

Composition API codesandbox example