Vuetify: [Bug Report] Scrolling only works if the element was visible before triggering $vuetify.goTo

Created on 16 Mar 2018 · 2Comments · Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.0.8
Vue: 2.5.16
Browsers: Firefox 59.0
OS: Linux x86_64

Steps to reproduce

Make sure to use Align to bottom for the preview window (top right buttons in preview window), such that the preview has a scrolling bar.

1) Click on toolbar link: Scroll does not work.
2) Click on v-btn: Show and scroll to second.

Expected Behavior

The second <v-card> element is set to be visible and the window is scrolled to its position.

Actual Behavior

An error is thrown, because $vuetify.goTo is called before the element is rendered on the page:

[Vue warn]: Error in event handler for "click": "TypeError: document.querySelector(...) is null" found in
---> <VBtn>

       <ScrollWorks> at /src/components/ScrollDoesNotWork.vue

         <VContent>

           <VApp>

             <App> at /src/App.vue

               <Root>

getTargetLocation@https://j34w7zj5j9.codesandbox.io/node_modules/vuetify/dist/vuetify.js:5760:16
goTo@https://j34w7zj5j9.codesandbox.io/node_modules/vuetify/dist/vuetify.js:5777:24 toggle_show_second@https://j34w7zj5j9.codesandbox.io/src/components/ScrollDoesNotWork.vue?31ef14ae:111:7 invoker@https://j34w7zj5j9.codesandbox.io/node_modules/vue/dist/vue.common.js:2029:14 eventsMixin/Vue.prototype.$emit@https://j34w7zj5j9.codesandbox.io/node_modules/vue/dist/vue.common.js:2540:11 click@https://j34w7zj5j9.codesandbox.io/node_modules/vuetify/dist/vuetify.js:7250:7 invoker@https://j34w7zj5j9.codesandbox.io/node_modules/vue/dist/vue.common.js:2029:14 withMacroTask/fn._withTask@https://j34w7zj5j9.codesandbox.io/node_modules/vue/dist/vue.common.js:1828:15

Reproduction Link

https://codesandbox.io/s/j34w7zj5j9

layer 8 issue

Source

mimischi

Most helpful comment

https://vuejs.org/v2/api/#vm-nextTick

this.second_visible = true
this.$nextTick(() => this.$vuetify.goTo('#second_vcard'))

KaelWD on 16 Mar 2018

🎉4

All 2 comments

https://vuejs.org/v2/api/#vm-nextTick

this.second_visible = true
this.$nextTick(() => this.$vuetify.goTo('#second_vcard'))

KaelWD on 16 Mar 2018

🎉4

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord