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)) 

這應該等待在您嘗試滾動到視圖之前需要發生的呈現。