this.$vuetify.goTo(0) 在 vuetify 的 v-navigation-drawer 中不起作用

Question

这是我的代码：

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

当我点击代码中所示的按钮时，它应该滚动到抽屉的顶部。但事实并非如此。谁能帮帮我？

Answer 1

你需要申请container，这是options之一，用于滚动。如果你不提供这个，vuetify 不会知道把它放在你的导航抽屉里。

在导航抽屉中添加参考：

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

您可以在脚本中分配元素，以便我们可以在goTo 中引用它：

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

然后对于你的按钮，像你一样传递0，但添加container：

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

CODEPEN 供您参考。