How add in Vue refs data?

August 7, 2023

I want to click to the button and will scroll down or up. But me need refs. And for every span i added to ref and add index. But in the method i dont know how add thid index What is a problem? How add data in refs?Please,help me.Thanks 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) {
            // Problem is here! How fix this?
            const el = this.$refs.('category'+index)
            if (el) {
                el.scrollIntoView({behavior: 'smooth'})
            }
        }
    }
}

>Solution :

Try with:

goToSmiles(index) {
    const el = this.$refs['category' + index][0]
    if (el) {
        el.scrollIntoView({ behavior: 'smooth' })
    }
}

Removed the extra dot . after $refs and used square brackets to access the property with the name ‘category’ + index.
Added [0] after the ref, as Vue refs with the same base name become an array.