$vuetify.goTo won't scroll within a v-card component

user_10344592 0
Viewed 3712

I have a component with a v-card. I placed a simple button into the card title area. When I click I see that the method fires, it shows in the console. But, the card never scrolls. If I typo the class name, I get an error so the goTo appears to do something as it does not find the class. Without the typo, no error but the card body never scrolls.

<v-btn 
    x-small 
    class="ma-0 ml-6" 
    color="red" 
    dark
    dense 
    @click="gotoSelectedVendor()"
>
  GoTo
</v-btn>

...

gotoSelectedVendor() {
  // eslint-disable-next-line no-console
  console.log("gotoSelectedVendor");
  this.$vuetify.goTo(".selectedRow");
},

Does $vuetify.goTo only work to scroll the page? Does it not scroll the contents of a div?

vuetify.js vue.js
2 Answers

From the goto service, the goTo function take 2 arguments which are VuetifyGoToTarget and GoToOptions.

And the GoToOptions contains the container property which is set to document.scrollingElement by default.

So you can do something like:

gotoSelectedVendor() {
  this.$vuetify.goTo(".selectedRow", { container: ".yourCard" });
}

You can also use refs instead of class selector:

gotoSelectedVendor() {
  this.$vuetify.goTo(this.$refs.selectedRow, { container: this.$refs.card });
}

Example here.

user_24389330

I have found that goTo is a somewhat capricious function. Especially regarding the specification of the container. It did not work until I checked in the browser console where the scroll event is placed and that is on the div.v-card__text. Then it works as shown below. This function works now even if you use it inside a dialog. And do not forget to set ref="myCard" on the v-card element.

gotoSelectedVendor() {
        let wrapper = this.$refs['myCard'].$el.querySelector('div.v-card__text')
        this.$vuetify.goTo('.selectedRow', { container: wrapper })
    },
user_16001930
Related