this. $ vuetify.goTo (0) не работает внутри v-navigation-drawer в vuetify - PullRequest
Новая
       9

this. $ vuetify.goTo (0) не работает внутри v-navigation-drawer в vuetify

1 голос
/ 18 июня 2020

Это мой код: 

<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>

Когда я нажимаю кнопку, как показано в коде, она должна переместиться в верхнюю часть ящика. Но это не так. Кто-нибудь может мне помочь?

1 Ответ

1 голос
/ 18 июня 2020

Вам необходимо применить container, который является одним из options для прокрутки. Если вы его не предоставляете, vuetify не сможет разместить его на панели навигации.

Добавьте ссылку на панель навигации: 

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

Вы можете назначить элемент в своем script, чтобы мы могли ссылаться на него в goTo: 

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

Затем для вашей кнопки передайте 0, как и вы, но добавьте container: 

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

A CODEPEN для справки.

...