web-dev-qa-db-ja.com

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

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子コンポーネントがあります。私はこのメソッドを呼び出しています親コンポーネントで子コンポーネントの参照を使用します：

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である場合、要素にスクロールするにはどうすればよいですか？

javascripthtmlvue.jsgetelementbyidvue-component
6
benedemon

問題は、レンダリングが非同期であるため、scrollIntoViewがbeforeと呼ばれることです。基本的に、あなたが電話するとき

this.activeTab = 'Solution Details';

Vueはページをすぐにレンダリングせず、レンダリングをキューに入れるだけです。ただし、その直後にVueに、レンダリングされた要素を探してスクロールするように指示します。まだそこにはありません。

これを解決するための私の最初の刺し傷は、 $ nextTick を使用することだと思います。

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

それはあなたがビューにスクロールしようとする前に起こる必要があるレンダリングを待つべきです。

9
Bert