VueJS组件使用scrollIntoView（）

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> 

因此，有具有参考= “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时，应该如何滚动到某个元素？

Answer 1

问题是scrollIntoView在之前被称为该选项卡在页面上呈现，因为呈现是异步的。从本质上讲，当你调用

this.activeTab = 'Solution Details'; 

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

我觉得我的第一个刺解决这个问题的方法是使用$nextTick。

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

这应该等待在您尝试滚动到视图之前需要发生的呈现。