时间戳

首页 > 解决方案 > this.$vuetify.goTo(0) 在 vuetify 的 v-navigation-drawer 中不起作用

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

问题描述

这是我的代码：

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

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

标签： vue.jsvuetify.js

解决方案

您需要 apply container，这是optionsfor scroll 之一。如果你不提供这个，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 。

推荐阅读