I am attempting to generate a dynamic summary.
<template>
<ul>
<li v-for="(category, i) in categories" :key="i" class="cursor-pointer text-capitalize q-mb-sm" @click="scrollTo('category'+i)">{{ category }}</li>
</ul>
</div>
.....
</template>
<script setup>
import { ref } from 'vue'
let category0 = ref(null)
let category1 = ref(null)
let category2 = ref(null)
let category3 = ref(null)
let category4 = ref(null)
let category5 = ref(null)
let category6 = ref(null)
let category7 = ref(null)
....
function scrollTo(refName) {
[refName].value.scrollIntoView({ behavior: "smooth" });
}
...
</script>
Before version 3.2 and the script setup, I utilized this function to scroll to the id, however, I am unsure of how to dynamically create a reference value.
function scrollTo(refName) {
let element = this.$refs[refName];
refName.value.scrollIntoView({ behavior: "smooth" });
}