Vuetify v-card 不在 v-col 中，尽管被放置在那里

Posted 2023-02-23

【中文标题】Vuetify v-card 不在 v-col 中，尽管被放置在那里

【英文标题】：Vuetify v-card not inside v-col despite being placed there

【发布时间】：2021-09-25 01:11:35

【问题描述】：

好的，所以我正在尝试设置一个简单的网格布局，其中三个 v-card 等距离。

<v-main>
  <v-container>
    <v-row> 
      <v-col>
       <v-card outlined tile>Card 1</v-card>
      </v-col>
      <v-col>
       <v-card outlined tile>Card 2</v-card>
      </v-col>
      <v-col>
       <v-card outlined tile>Card 3</v-card>
      </v-col>
    </v-row>
  </v-container>
</v-main>

现在，根据the docs and examples they have，这应该会给我留下 3 张等距离的卡片，而且确实如此。

问题是当我将鼠标悬停在 任何 上时，它们都会变暗。查看开发工具会发现以下问题：

如您所见，v-cards 不是在 v-cols 中，因为它们应该是。但是，我在代码中看不到任何错误。我错过了一些额外的规则吗？

【问题讨论】：

你试过没有v-container 吗？

是的。结果是一样的

您的代码似乎在这个codepen 中工作（v-cards 在v-col 中呈现）。但是从你的例子中看不出为什么卡片应该在悬停时改变颜色。你能更新codepen来演示这个问题吗？

【参考方案1】：

我相信悬停时变暗的问题应该出在其他地方，并且与您在 Vue 调试器中看到的奇怪现象无关。我认为您的代码没有问题（将其与我在下面的#1 中提到的进行比较）。我倾向于认为调试器中的奇怪之处要么是它自己的错误，要么是与调试器如何反映 Vuetify 内部相关的错误（或功能？），这不会破坏真正的应用程序行为。以下是我的论点：

查看Vuetify grid with cards example - 它的结构与您的示例相同（忽略它们的 v-col 标签的 'cols' 属性 - 它们展示了列的不均匀分布，如果您删除该属性，您将获得几乎自己的例子，有 3 张卡片，每张卡片都在自己的 v-col 内）。但是，如果您尝试将此标准 Vuetify 示例复制粘贴到一个空的 Vue CLI 应用程序中并查看调试器，您会看到相同的奇怪层次结构。检查我的屏幕截图： 然而，这并没有破坏 DOM 模型，其中 v-cards 按预期位于 v-cols 内： 这也不会对实际应用程序行为造成任何问题。在悬停时更改背景颜色（我将简单的 CSS 更改添加到 Vuetify 原始示例只是为了尝试重现您的原始问题）就像一个魅力。请注意，屏幕截图的一张卡片中的红色背景 - 它仅扩散到单个悬停的卡片。

我记得过去在 Vue 调试器中看到了相同的 Vuetify 层次结构异常，尽管它没有产生任何问题，而且似乎不是由代码中的任何错误引起的。我当时只是忽略了它。

我还复制了您的示例into a codepen，仅添加了两个基本内容：用于测试悬停的 CSS（与我在上面的 #1 中添加的相同）和基本的 Vue 对象创建和安装（我想您应该拥有自动生成）。 CSS：

 .v-card:hover 
     background-color: red;
 

JS：

 new Vue(
     vuetify: new Vuetify(),
 ).$mount('#app')

悬停在该代码笔中也很有效（如果我正确理解您提到的那种问题）。不过，我应该提到 CSS 与我在 #1 中必须使用的内容有一个不同之处。在 #1 中，使用了一个自定义 CSS 类 (<v-card class="imgCard">)，因为 v-card 位于另一个高级 v-card 中，所以我不能使用 '.v-card' 来突出显示一个嵌套卡 -否则，他们都会一起突出显示。 BTW，这不是你偶然遇到的问题吗？

所以总的来说，我认为要么您的原始代码有其他原因导致问题（假设您在编写问题时可能已经简化了它），或者我没有明白您的意思是什么类型的悬停。无论如何，我很确定 Vuetify 调试器的异常并不意味着代码本身有问题。

【讨论】：

谢谢。我对代码持怀疑态度并开始删减内容，直到问题停止，因为事实证明是旧代码库中遗留的 CSS 文件导致了问题。它使用相同的类名并应用变暗