In this episode, we circle back to perfecting the post scrolling feature we implemented earlier. You'll see a demo of the current behavior, where replying to a thread scrolls nicely to the target post. However, a bug crops up—that same scrolling triggers even when you edit a post, snapping you to the bottom no matter what. Not ideal!
To fix this, we swap out the onUpdated
lifecycle hook for a Vue watcher that listens specifically for changes to the post ID. This way, scrolling only happens when it should—right when a new post ID appears (like after a new reply is added).
We walk through updating the import, removing the call from onUpdated
, and setting up a watcher that smoothly scrolls to the correct post whenever postId
changes. After implementing the fix, we test to make sure editing and replying both behave as intended. Scrolling is now much smarter, keeping the user's place when editing while still jumping to new replies as needed!
If you want to see a practical use of Vue's watchers for UX polish, this episode's for you.