CODEWITHSUNDEEP
vue.jsvuetify.js
Boidurja Talukdar
Boidurja Talukdar

Reputation: 696

this.$vuetify.goTo(0) not working inside v-navigation-drawer in vuetify

This my code: 

<template>
   ....
   <v-navigation-drawer app absolute width="340" permanent>

    ....
     <v-btn fab dark fixed bottom left color="primary" @click="$vuetify.goTo(0)">
        <v-icon>keyboard_arrow_up</v-icon>
     </v-btn>
    ...
   <v-navigation-drawer>

<template>

When I click the button as shown in the code, it should scroll to the top of the drawer. But it doesn't. Can anyone help me?

Upvotes: 1

Views: 2883

Answers (1)

AVJT82
AVJT82

Reputation: 73367

You need to apply container, which is one of the options for scroll. If you are not providing this, vuetify won't know to place it on your nav drawer.

Add a ref to your nav drawer:

<v-navigation-drawer app absolute width="340" permanent ref="myNavDrawer">

You can assign the element in your script, so that we can refer to it in goTo:

mounted() {
  this.navDrawerContent = 
   this.$refs['myNavDrawer'].$el.querySelector('div.v-navigation-drawer__content');
}

Then for your button, pass 0 as you did, but add the container:

<v-btn ... @click="$vuetify.goTo(0, { container: navDrawerContent } )">

A CODEPEN for your reference.

Upvotes: 2

Related Questions