Cannot read property 'scrollIntoView' of null - VueJS

Question

I'm working in VueJS and I need to delete a topic and then scroll to the next item after the deletion was made.

Here is the code:

deleteTopic: function (index) {
                        var lcID="";
                        if(index===0) {
                            lcID = '#cAccordion-'+(index+1);
                        }
                        else {
                            lcID = '#cAccordion-'+index;
                        }
                        this.agenda.topics.splice(index, 1);
                        document.querySelector(lcID).scrollIntoView({ behavior: 'smooth'});
                        this.confirmDeleteTopicIndex = -1;                  
                    }

It's working perfectly EXCEPT if I delete the first item, that's when I get the error: Cannot read property 'scrollIntoView' of null.

In the code I'm checking for a zero index. It works...it will scroll but I'd like to get rid of the error.

Just debug the code. Most probably there is no element in the DOM with one of the ids set by lcID — palaѕн
– palaѕн, Commented Feb 26, 2020 at 15:38
You could also make use of references into your template ! vuejs.org/v2/api/#ref This way you would be able to check the existence of your dom element in an easier way — GeorgesA
– GeorgesA, Commented Feb 26, 2020 at 15:44
I am trying to debug the code. It should work. as there will always be a '#cAccordion-'+(index+1); I'll keep trying :-) I will also look up $refs. Thanks. — user581733
– user581733, Commented Feb 26, 2020 at 15:47

user581733 · Accepted Answer · 2020-02-26 16:45:34Z

2

I set a timer as I said... here is the code.

setTimeout(function() {document.querySelector(lcID).scrollIntoView({ behavior: 'smooth'});}, 2000);

answered Feb 26, 2020 at 16:45

user581733

5043 gold badges9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user581733 · Accepted Answer · 2020-02-26 16:28:28Z

0

I there. I placed a timer on it and it worked perfectly. The DOM had to update.

answered Feb 26, 2020 at 16:28

user581733

5043 gold badges9 silver badges21 bronze badges

Collectives™ on Stack Overflow

Cannot read property 'scrollIntoView' of null - VueJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related