Vue中如何正确使用refs实现点击滚动？索引调用问题求助

问题说明 #

点击按钮后需要平滑滚动到对应分类区域，已为符合条件的span元素绑定了带索引的ref（命名格式category+index），但在goToSmiles方法中调用ref时存在语法错误，无法正确获取目标元素实现滚动。

解决方案 #

1. 修正ref的获取语法
   this.$refs是一个对象，不能使用this.$refs.('category'+index)这种错误语法，必须通过方括号语法访问动态键名：this.$refs['category' + index]

2. 处理v-if导致的ref数组问题
   由于span元素带有v-if条件，只有满足条件的元素才会被渲染到DOM中。Vue对于这种在v-for内结合v-if的ref，会将其存储为数组（即使只有一个匹配元素），因此需要取数组的第一个元素来获取DOM节点。

3. 验证索引对应关系
   确保generalSmiles的索引和categories的索引是一一对应的，否则会出现滚动到错误分类的情况。

修正后的完整代码 #

<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>

<script>
export default {
    data() {
        return {
            generalSmiles: [
                {smile: "😀", id: "smile__😀"},
                {smile: "🐵", id: "smile__🐵"},
                {smile: "📕", id: "smile__📕"},
                {smile: "🏠", id: "smile__🏠"},
                {smile: "✅", id: "smile__✅"}
            ],
            // 补充categories数据（原代码缺失，需根据实际情况定义）
            categories: ["表情", "动物", "物品", "建筑", "符号"]
        }
    },
    methods: {
        category_emojis(category) {
            // 这里补充你原有的分类过滤逻辑
            return [];
        },
        goToSmiles(index) {
            // 修正后的ref获取方式
            const refArray = this.$refs['category' + index];
            // 由于v-if的存在，ref是数组，取第一个元素
            const el = refArray ? refArray[0] : null;
            if (el) {
                el.scrollIntoView({behavior: 'smooth'})
            }
        }
    }
}
</script>

额外提示 #

• 如果你的categories和generalSmiles的数量不匹配，建议不要直接用索引绑定，而是通过分类标识（比如category的名称或ID）来关联按钮和目标元素，避免索引错位问题。
• 若不需要v-if条件，可以去掉该指令，此时this.$refs['category' + index]会直接返回单个DOM元素，无需处理数组。

内容的提问来源于stack exchange，提问作者VueFrontend