vue.js - 如何在满足 v-show 条件后渲染元素时立即运行代码？

Question

这里的一般问题与特定的代码无关：我需要知道元素的坐标才能向下滚动到它。

这个元素有一个v-show条件并且在页面加载时被隐藏，但是用户可以点击一个按钮来显示这个元素（通过满足v-show条件）。

问题：如果我在用户单击按钮时立即计算元素的坐标，我不会得到正确的坐标。我必须等待一两秒钟setTimeout()才能最终获得正确的坐标。

问题：有没有办法尽快Vue做到这一点，而不是让它等待一段时间？

标签： vue.js

Answer 1

如果您正在显示一个元素，然后想要滚动到它，您可以尝试使用nextTick回调：

// Set data that will show other element, i.e.
// this.showOtherElement = true;

// Use nextTick callback to scroll to element in the next tick
this.$nextTick().then(() => {
    // Put code to scroll to element here
});