CODEWITHSUNDEEP
vue.jsscrollelementref
komasutra
komasutra

Reputation: 21

VueJS : Scroll to line of a table on load

I have a table (from the element framework), with a list of questions inside. I can choose one to modify, do my stuff, and once I validate, I'd like the page to scroll to the modified question.

<template>
    <div>
        <el-table :data="list">
            <el-table-column :label="$t('label')" width="300">
                <template slot-scope="scope">
                    <span :ref="list[scope.$index].id">{{ list[scope.$index].label }}</span>
                </template>
            </el-table-column>

Here's how I manage the ref of each question so it's unique

and in my <script> part : document.getElementById(this.$route.params.questionId).scrollIntoView();

I send the id as a parameter in my url and get it in my list page just fine. But with

console.log("Id : ", this.$route.params.questionId, this.$refs[this.$route.params.questionId])
document.getElementById(this.$route.params.questionId).scrollIntoView();

The questionId is fine, but the rest is undefined.

If I try to log this.refs, I get stuff like that

How can I get it to work ?

Solutions I tried :

this.$nextTick(() => {
      this.$refs[this.$route.params.questionId].scrollIntoView()
});

still undefined

Edit : Added log screenshot

Upvotes: 0

Views: 1782

Answers (1)

komasutra
komasutra

Reputation: 21

I figured out what the problem was.

I was trying to do it in the mounted section, it seems like the page wasn't rendered and therefore this.$refs[this.$route.params.questionId].scrollIntoView() couldn't work (thus the undefined results I got)

Solution :

In the <script> part, I added

updated() {
    if(this.scrollOnLoad && this.$route.params.questionId){
        this.scroll();
        this.scrollOnLoad = false;
    }
},

which happens once the mounted part is over, as show on this page.

WARNING

Update will activate whenever you do an action, for example clicking in a TextInput (as in my case). I fixed this by using a boolean in the data section (updated the code above to match the solution)

Upvotes: 2

Related Questions