CODEWITHSUNDEEP
javascriptjqueryscrollvue.jsvuejs2
Kin
Kin

Reputation: 4596

How to scroll to specific data value in Vue?

I have simple table in Vue:

<tbody>
    <tr v-for="(item, index) in items">
        <td>
            ...
        </td>       
    </tr>
</tbody>

The items are dynamically adding via unshift. The main thing is that I need to navigate through table via up, down keys so I did it like this:

jQuery(document).keydown((e) => {
    const which = e.which;

    if ([38, 40].indexOf(which) != -1) {
        e.preventDefault();

        if (this.active_index == null) {
            this.active_index = 0;
        } else {
            if (e.which == 38) {
                // up
                this.active_index--;
            } else {
                // down
                this.active_index++;
            }
        }

        console.log(this.items[this.active_index])
    }
});

Is it possible somehow to get this.items[this.active_index] element or its position to scroll to it.

Upvotes: 2

Views: 530

Answers (1)

hirra
hirra

Reputation: 977

<tbody>
   <tr v-for="(item, index) in items" ref="'dom'+index">
       <td>
           ...
       </td>       
   </tr>

Bind ref and data , when u need get the dom , u could use this.$refs[dom${this.active_index}]

Upvotes: 1

Related Questions