Vue提交表单后，如何实现显示指定div时立即平滑滚动？

问题原因 #

你遇到的问题核心在于Vue的DOM更新是异步的：当你设置this.infoComplete = true后，Vue并不会立刻把#main元素渲染到页面上，而是将DOM更新任务加入异步队列等待执行。这时候直接调用scrollIntoView，目标元素还没出现在DOM中，所以第一次点击没有滚动效果；第二次点击时DOM已经完成更新，滚动就正常生效了。

解决方案 #

下面提供两种可靠的实现方式，优先推荐更符合Vue最佳实践的写法：

方案1：使用$nextTick + Vue Refs（推荐）

先给目标元素添加ref属性，替代原生的getElementById，更贴合Vue的组件化思维：

<div ref="main" class="container" v-if="infoComplete">
  <!-- 内部内容保持不变 -->
</div>

然后修改onSubmit函数，用$nextTick确保DOM更新完成后再执行滚动操作：

onSubmit() {
  console.log("Submitted");
  this.infoComplete = true;
  // 等待Vue完成DOM更新后再执行滚动
  this.$nextTick(() => {
    // 先判断元素是否存在，避免报错
    if (this.$refs.main) {
      this.$refs.main.scrollIntoView({ behavior: "smooth" });
    }
  });
}

方案2：使用$nextTick + 原生DOM查询

如果你更习惯原生DOM操作，也可以保留getElementById，但同样需要用$nextTick包裹滚动逻辑：

onSubmit() {
  console.log("Submitted");
  this.infoComplete = true;
  this.$nextTick(() => {
    const elmnt = document.getElementById("main");
    if (elmnt) {
      elmnt.scrollIntoView({ behavior: "smooth" });
    }
  });
}

额外优化建议 #

你当前的提交按钮上同时绑定了@submit和表单的@submit.prevent，会导致事件重复触发，建议移除按钮上的@submit绑定：

<button class="btn btn-light submit" type="submit">Submit</button>

表单的@submit.prevent已经可以阻止默认提交行为并触发onSubmit函数，这样逻辑更简洁清晰。

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