scrollIntoView（）を使用したVueJSコンポーネント

Question

vueコンポーネントのdocument.getElementById（）。scrollIntoView（）を使用してJump-To-Divの種類の機能を使用しようとしています。

コンポーネント内にあるときに関数を呼び出すと機能が正常に動作します。しかし、refを使って親コンポーネントから関数を呼び出そうとすると、要素はスクロールされて表示されません。

親コンポーネントはページで、子コンポーネントはページ内のタブです。だから、REF = "solutionDetails" を持っているSolutionDetails.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> 

- ：

これは、親コンポーネントに子Vueのコンポーネントです。 私は、子コンポーネントの参照を使用して親コンポーネントにこの方法を呼び出しています：

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に変更されていますが、要求された要素がスクロールされて表示されません。

他のタブがアクティブタブの場合、要素をスクロールするにはどうすればよいですか？

Answer 1

がと呼び出されてからになる前にレンダリングが非同期であるため、タブがレンダリングされるという問題があります。基本的に、ときに、あなたはそれだけでレンダリングキューに入れ、

this.activeTab = 'Solution Details'; 

Vueのはすぐがページをレンダリングしません呼び出します。しかし、その直後に、Vueに、レンダリングされた要素を探し、それにスクロールするように指示します。それはまだありません。

これを解決するための私の最初の刺しゅうは$nextTickを使うことになると思います。

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

表示にスクロールする前に発生する必要があるレンダリングを待つ必要があります。