Vue3组合式API中点击按钮滚动v-if元素失效问题求助

问题原因 #

1. this.$nextTick 无法使用：Vue3的setup环境中不存在Vue实例的this，所以不能通过this.$nextTick调用，需要直接导入Vue官方提供的nextTick方法。
2. ref获取方式冗余：Vue3支持直接在模板中给元素绑定ref，无需手动通过document.getElementById获取，更贴合Vue的响应式设计逻辑。

修正后的代码 #

首先补充导入ref和nextTick（之前仅导入了onMounted，缺少这两个核心API）：

import { ref, nextTick, onMounted } from 'vue';
export default {
  setup() {
    const confirmed = ref(false);
    // 声明ref变量，后续直接绑定到模板元素
    const feedback = ref(null);

    async function confirmSelection() {
      confirmed.value = true;
      
      // 等待DOM更新完成后执行滚动
      await nextTick();
      // 用可选链避免元素未渲染时的报错
      feedback.value?.scrollIntoView({ behavior: "smooth", block: "center" });
    }

    return {
      confirmed,
      confirmSelection,
      feedback // 必须将ref返回给模板才能绑定使用
    }
  },
}

对应的模板部分，给目标div绑定ref：

<button @click="confirmSelection">确认选择</button>
<div v-if="confirmed" ref="feedback" id="feedback">
  <!-- 你的内容 -->
</div>

关键说明 #

• nextTick 的作用：修改confirmed的值后，Vue不会立刻更新DOM，nextTick会等待DOM更新完成后再执行滚动逻辑，确保目标元素已经被渲染到页面中。
• 可选链操作符?.：添加该操作符可以避免元素未完成渲染时调用scrollIntoView引发的报错，提升代码健壮性。
• ref绑定逻辑：将feedback ref返回给模板，并通过ref="feedback"绑定到目标元素，Vue会自动将DOM元素赋值给feedback.value，无需手动获取。

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