My goal is to click a button and have the page scroll up or down. However, I need references for each span I add in order to include an index. The issue arises when trying to incorporate this index into the method. How can I add data to these references? Any assistance would be greatly appreciated. Thank you, friends.
<template>
<div id="app">
<div class="emoji_picker">
<div class="picker_container">
<div class="general__smiles"
v-for="(emoji,index) in generalSmiles"
:key="emoji.id"
>
<button
@click="goToSmiles(index)"
>
{{ emoji.smile }}
</button>
</div>
<div class="category"
v-for="(category,index) in categories"
:key="`category_${category}`"
>
<span
v-if="category_emojis(category).length"
:ref="'category'+index" //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
>
{{ category }}
</span>
</div>
</div>
</div>
</div>
</template>
export default {
data() {
return {
generalSmiles: [
{smile: "😀", id: "smile__😀"},
{smile: "🐵", id: "smile__🐵"},
{smile: "📕", id: "smile__📕"},
{smile: "🏠", id: "smile__🏠"},
{smile: "✅", id: "smile__✅"}]
}
},
methods: {
goToSmiles(index) {
// Issue lies here! How do I resolve this?
const el = this.$refs.('category'+index)
if (el) {
el.scrollIntoView({behavior: 'smooth'})
}
}
}
}