VueJS-Komponenten mit scrollIntoView()

Question

Ich versuche, eine Art von Jump-To-Div-Feature mit document.getElementById(). ScrollIntoView() in einer Vue-Komponente zu verwenden.

Die Funktion funktioniert gut, wenn ich die Funktion aufrufen, wenn ich in der Komponente bin. Wenn ich jedoch versuche, die Funktion von der Elternkomponente mit einem Verweis aufzurufen, wird das Element nicht in die Ansicht gescrollt.

Die übergeordnete Komponente ist eine Seite und die untergeordneten Komponenten sind Registerkarten auf der Seite.

Dies ist das Kind Vue Component in der übergeordneten Komponente: -

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

So gibt es eine Komponente SolutionDetails.Vue Kind ist, das eine ref hat = "solutionDetails". Ich rufe diese Methode in der übergeordneten Komponente den Referee für die Komponente Kind mit:

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

Es gibt eine showCurrent Funktion in der Kind-Komponente, die für ein Argument „Befehl“ get ausgeführt sollte. Dies ist die Funktion in der untergeordneten Komponente.

Wie Sie sehen können, sollte showCurrent das Element auf der Seite erhalten und in die Ansicht scrollen. Wenn SolutionDetails.vue die aktive Registerkarte ist, wird das entsprechende Element vollständig in die Ansicht gescrollt. Aber ich führe die Elternfunktion von einer anderen Registerkarte aus, dann wird die this.activeTab = 'Solution Details'; ausgeführt, dh. Die aktive Registerkarte wechselt zu SolutionDetails.vue, aber das angeforderte Element wird nicht in die Ansicht gescrollt.

Was soll ich tun, um zu einem Element zu scrollen, wenn ein anderer Tab das activeTab ist?

Answer 1

Das Problem ist, dass scrollIntoView heißt vor der Tab wird auf der Seite gerendert, da Rendern asynchron sind. Im Grunde nennen, wenn Sie

this.activeTab = 'Solution Details'; 

Vue nicht sofort die Seite machen, es ist nur eine Render-Warteschlangen. Gleich danach sagen Sie Vue, nach dem gerenderten Element zu suchen und zu diesem zu scrollen. Es ist noch nicht da.

Ich denke, mein erster Stich bei der Lösung wäre $nextTick zu verwenden.

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

, die für das Rendern warten soll, die auftreten muss geschehen, bevor Sie in die Ansicht zu scrollen versuchen.