$vuetify.goTo 不会在 v-card 组件中滚动答案

【问题标题】：$vuetify.goTo won't scroll within a v-card component$vuetify.goTo 不会在 v-card 组件中滚动
【发布时间】：2020-11-18 06:16:43
【问题描述】：

我有一个带有 v-card 的组件。我在卡片标题区域放置了一个简单的按钮。当我单击时，我看到该方法触发，它显示在控制台中。但是，卡片永远不会滚动。如果我打错了类名，我会收到一个错误，因此 goTo 似乎在做某事，因为它没有找到该类。没有错字，没有错误，但卡体永远不会滚动。

<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");
},

$vuetify.goTo 是否只能滚动页面？它不会滚动div的内容吗？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

在goto 服务中，goTo 函数接受两个参数，即VuetifyGoToTarget 和GoToOptions。

GoToOptions 包含container 属性，默认设置为document.scrollingElement。

所以你可以这样做：

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

你也可以使用 refs 代替类选择器：

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

例如here。

【讨论】：

有些奇怪。如果我说容器类的错字，我会收到一个找不到容器的错误。我纠正拼写，再试一次，没有错误。我的 console.log 也有效，所以我知道该方法正在被解雇。有什么事正在发生。然而没有任何滚动。是在数据表中滚动还是卡片内容在滚动？
好的，现在我们可能正在取得进展。如果我从数据表中删除高度并在卡上放置一个固定高度，那么 goTo 就可以工作。但是，现在我的卡片标题滚出视图。
好吧，终于找到了正确的目标容器：container: ".v-data-table__wrapper"
不应该是this.$refs.something而不是$refs.something吗？
是的，你是对的。我已经更新了我的答案。

【解决方案2】：

我发现 goTo 是一个有点反复无常的函数。特别是关于容器的规格。直到我检查了放置滚动事件的浏览器控制台并且位于div.v-card__text 上，它才起作用。然后它的工作原理如下所示。即使您在对话框中使用此功能，它现在也可以使用。并且不要忘记在 v-card 元素上设置ref="myCard"。

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

【讨论】：