使用 scrollIntoView() 的 VueJS 组件

Question

我正在尝试在 vue 组件中使用 document.getElementById().scrollIntoView() 来使用 Jump-To-Div 类型的功能。

如果我在组件中调用该功能，该功能可以正常工作。但是，如果我尝试使用 ref 从父组件调用该函数，则该元素不会滚动到视图中。

父组件是一个页面，子组件是页面中的选项卡。

这是 父组件中 的子 Vue 组件：-

 <el-tab-pane label="Solution Details" name="Solution Details" v-loading="loading">
                <solution-details
                    :formData="response"
                    ref="solutionDetails"
                    @done="$emit('done')">
                </solution-details>
            </el-tab-pane>

所以有一个具有 ref=“solutionDetails” 的 SolutionDetails.Vue 子组件。我使用子组件的 ref 在父组件中 调用此方法：

 handleClick(command) {
            this.activeTab = 'Solution Details';
            this.$refs.solutionDetails.showCurrent(command);
        },

子组件中有一个 showCurrent 函数，应该为参数“命令”执行该函数。这是 子组件中的 那个函数。

 methods: {
        showCurrent(index) {
            document.getElementById(index).scrollIntoView();
        },

如您所见， showCurrent 应该获取页面中的元素并滚动到视图中。如果 SolutionDetails.vue 是活动选项卡，则相应的元素正在滚动到视图中。但是我正在从其他选项卡执行父函数，然后 this.activeTab = 'Solution Details'; 正在执行，即。活动选项卡正在更改为 SolutionDetails.vue，但请求的元素未滚动到视图中。

当其他一些选项卡是 activeTab 时，我应该怎么做才能滚动到一个元素？

原文由 benedemon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题是 scrollIntoView 在页面上呈现选项卡 之前 被调用，因为呈现是异步的。本质上，当你打电话时

this.activeTab = 'Solution Details';

Vue 不会 立即 渲染页面，它只是将渲染排队。然而，紧接着你告诉 Vue 寻找渲染的元素并滚动到它。它还没有。

我认为我解决这个问题的第一个尝试是使用 $nextTick 。

 this.$nextTick(() => this.$refs.solutionDetails.showCurrent(command))

这应该等待需要发生的渲染，然后再尝试滚动到视图中。

原文由 Bert 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

实际上，您必须引用组件中的元素。例如这样的事情：

 this.$refs.[ref name here].$el.scrollIntoView({ behavior: 'smooth' });

原文由 Steven Benjamin 发布，翻译遵循 CC BY-SA 4.0 许可协议