Vue.js - Scroll to element not working on

Question

I have the following v-for and when i add a new comment I want to scroll to that comment but I'm getting the following error in console:

Cannot read property 'top' of undefined

This is the line causing the error in my add method:

$('html, body').animate({scrollTop: $("#comment-" + response.data.id).offset().top}, 2000);

I've checked console and response.data.id is not empty so it must be to do with jquery not recognising the added element. any ideas?

<ul class="list-inline">
   <li v-for="(comment, index) in comments" 
       :key="comment.id" 
       :id="'comment-' + comment.id">
     <span v-html="comment.comment"></span>
    </li>
</ul>

 var vm =  new Vue({
    el: '#root',
    data: {
       comments: [
                {
                  "id": 2,
                  "comment": "blah...",
                },
                {
                  "id": 4,
                  "comment": "blah...",
                }
                {
                  "id": 6,
                  "comment": "blah...",
                }
        ]
     },
     methods: {
        add: function (comment) {
             axios.post("api/comments/add, { comment: comment })
               .then((response) => {
                  this.comments.push(response.data);
                  $('html, body').animate({scrollTop: $("#comment-" + response.data.id).offset().top}, 2000);

                })
               .catch((error) => {}); 
        }

    }
 });

What is the value of response.data.id? My guess is that #comment-X doesn't exist and therefore .offset() returns undefined. — Joe
– Joe, Commented Dec 11, 2017 at 15:57
@Joe it should exist becuase i call this.comments.push(response.data); before i call the scroll function. response.data.id has the id value of the newly created comment e.g. 8 — adam78
– adam78, Commented Dec 11, 2017 at 16:03
@user1497119 is correct with their answer, #comment-X doesn't exist yet when you try to scroll to it. — Joe
– Joe, Commented Dec 11, 2017 at 16:25

tony19 · Accepted Answer · 2022-07-15 01:17:07Z

3

You might want to wait until its rendered on the page before trying to manipulate the Object with jQuery.

// next line adds it into the shadow dom
this.comments.push(response.data)
// next tick is called after rendering
this.$nextTick(() => {
  $('html, body').animate({scrollTop: $("#comment-" + response.data.id).offset().top}, 2000)
})

Also check out https://v2.vuejs.org/v2/api/#Vue-nextTick

edited Jul 15, 2022 at 1:17

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 11, 2017 at 16:15

user1497119

4736 silver badges20 bronze badges

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

Comments

Igor Parra · Accepted Answer · 2019-12-28 13:53:54Z

0

You can use vue-scrollto that gives you many options and compatibility, even for Nuxt.js

Given an url like http://localhost:9104/post/477#entry-1327 use a watch and a computed property to assure all data is rendered before scroll to the element.

  watch: {
    render (n) { // computed prop (bool) that tells me when all api data is already loaded
      const hash = location.hash.substr(1)
      if (!hash) return
      if (n) {
        this.$nextTick(() => {
          var el = document.getElementById(hash)
          this.$scrollTo(el)
        })
      }
    }
  },

Special ball

How to build a proper link with a hash

this.$router.push({ name: 'post', params: { postId }, hash: `#entry-${parentId}` })

answered Dec 28, 2019 at 13:53

Igor Parra

10.4k10 gold badges74 silver badges104 bronze badges

Collectives™ on Stack Overflow

Vue.js - Scroll to element not working on

2 Answers 2

Comments

Special ball

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Special ball

Comments

Your Answer

Sign up or log in

Post as a guest

Related